CODEWITHSUNDEEP
typescriptangular
John Baird
John Baird

Reputation: 2676

Angular 2 *ngIf not reevaluation on model change

I have a navbar with 2 buttons. I wish to only show the button for the other page and disable the button for the current page.

On opening the settings page, the settings button is hidden. When I click the profile button, it doesn't disable and settings button doesn't appear.

Here's the component class code:

export class SettingsComponent implements OnInit {
   isSettingsProfile = false;
   isSettingsHome = false;
   
   ngOnInit() {
       this.isSettingsHome = true;
       this.isSettingsProfile = false;
   }
   
   OnNavBarClick(button: string) {
       if (button = "settings") {
           console.log ('setting home true/ profile false')
           this.isSettingsHome = true;
           this.isSettingsProfile = false;
       }
       else if (button = "profiles") {
           console.log ('setting home false/ profile true')
           this.isSettingsProfile = true;
           this.isSettingsHome = false;
       }
       
   }

And the navbar html:

        <ul class="nav navbar-nav navbar-right">
            <li> <a [routerLink]="['/home']" href="#">Home</a></li>
            <li *ngIf="!isSettingsHome" class="active"><a [routerLink]="['/settings']" href="#" (click)="OnNavBarClick('settings')">Settings</a></li>
            <li *ngIf="!isSettingsProfile"><a [routerLink]="['/settings/profile']" href="#" (click)="OnNavBarClick('profile')">Profile</a></li>
        </ul>

Any suggestions?

Upvotes: 4

Views: 3008

Answers (3)

bryan60
bryan60

Reputation: 29325

I'm not sure what's going on here, and can't be without knowing more about your router structure, but I think gunter is likely correct that the navigation is causing the component to reload and thus reverting the component to it's initial state. I will recommend the following restructure:

First, add the routerLinkActive directive to your router links and set the class to "hide-link" (or whatever name you prefer)

 <li><a [routerLink]="['/settings']" routerLinkActive="hide-link">Settings</a></li>

then define a simple CSS class to hide the link

.hide-link { display: none; }

Upvotes: 0

Loic T
Loic T

Reputation: 233

I had this issue when implementing a breadcrumb component and have applied the solution proposed in this SO answer. I had to change to 

import { ChangeDetectorRef } from '@angular/core';

because I use angular4 and then call

detectChanges()

at the end of your function OnNavBarClick()

Upvotes: 3

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657148

You have a redundant " in <li *ngIf="!isSettingsHome"" class

Upvotes: 0

Related Questions