I am doing a small project on Angular and one of the tasks is display 2 buttons ONLY if an admin is logged in. Now, to check if the admin is logged in, I have a method inside user.service.ts file.
public getRole(): string {
return sessionStorage.getItem('role');
}
Now, I have a component where I am displaying the buttons. In the .ts file, I imported the user service of course.
import { UserService } from 'src/app/services/user/user.service';
and I added this code to the constructor of the same .ts file.
private userService: UserService
Then, in the html file, I am checking like this:
<div *ngIf="this.userSevice.getRole() == 'ADMIN'">
<a class="btn btn-secondary col-md-12" routerLink='/boat-offer' routerLinkActive="active">Delete</a>
<a class="btn btn-success col-md-12" routerLink='/boat-offer' routerLinkActive="active">Edit</a>
</div>
However, in console, I am getting the error:
ERROR TypeError: Cannot read property 'getRole' of undefined
Whats even more annoying is the fact that the project I am working on was given to us by our lecturer and everyone is using the same version where these getRole method was given to us. However, on others' project it works and on mine it does not. What am I doing wrong please?