I am working on a navigation bar that consists of 2 buttons. My goal is to display only the button for the other page and disable the button for the current page.
Currently, when I navigate to the settings page, the settings button is hidden. However, when I click on the profile button, the settings button does not disable as expected.
Below is the code for the component class:
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;
}
}Here is the HTML for the navbar:
<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 tips or suggestions on how to fix this issue?