Angular 10, problem header navigation for different type user

Question

I have a header on the web page that according to the type of user (normal or admin) shows a navigation header with 2 different operations, an admin sees all registered users and their reservations while a normal user sees their reservations and can to book. I used a '* ngIf' to show the different header but on login with normal user it shows me the header of the admin and more 'always in the header I have the logout button which shows a welcome message with the name of the 'user who accesses but if I don't update the page is not seen. how can i solve? thank you.

app-component: https://i.stack.imgur.com/v9tA5.png

header: https://i.stack.imgur.com/yOerJ.png

Answer 1

it would be more efficient if you post the ts component file to see how permissions are arriving. A suggestion is to unificate the code block, and check the permission only in the item of the menu. To avoid duplicate code.

<div *ngIf="loggedUser">
    <ul>
      <li *ngIf="isAdmin">
        <a>LINK1</a>
      </li>
      <li *ngIf="!isAdmin">
        <a>LINK2</a>
      </li>
    </ul>
</div>