CODEWITHSUNDEEP
htmlangulartypescriptnavbarangular6
Priyanka
Priyanka

Reputation: 117

How do you display different navigation bars on different pages in angular 6?

I have 4 roles in my application. I'm just assigning a value like 1,2,3,4 for each users & storing the logged in username & the corresponding value in a session.

I have a main page from where I can navigate to other login screens. In the main page I need to display a navbar. In the different login pages I need to display another navbar, and yet another after logging in.

I'm using a common navbar where I'm using *ngIf condition in div to check the role which is stored in session & routing the navbar div accordingly.

    <div *ngIf =" role === 'null'" >
      Navbar home
    </div>
    <div *ngIf = "role === '1' ">
      Navbar 1
    </div>
      <div *ngIf = "role === '2'" >
      Navbar 2
    </div>

My problem is, after logging in, I can only see my home navbar. Only after refreshing the page can see the Navbar 1. And if I go back Navbar 1 is not changing in to Navbar home.

Can anybody please help me with this.

Upvotes: 0

Views: 720

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222532

The syntax is wrong, you should embed the condition within ""

<div *ngIf="role==='null'">
      Navbar home
</div>
<div *ngIf="role==='1'">
      Navbar 1
</div>
<div *ngIf="role==='2'">
      Navbar 2
</div>

Upvotes: 1

Related Questions