Change content of NavBar in Angular based on ngIf condition - node.js

Question

I am a beginner in Angular and Node JS. I am trying a simple navigation bar change based on ngIf condition. However, it doesn't seem to work.
I have already tried it using static member variables.
Also, tried creating a method which changes the value of isUserAuthenticated in navbar.component and called the methods in homepage.component as well as dashboard.component.
I have also done console.log() and checked the value of isUserAuthenticated variable. It is being updated on both the homepage.component as well as dashboard.component. However, the NavBar always remains the same.
I have changed the value directly in navbar.component and then it works. So, I am wandering why it is not working if I change the value from other components.
navbar.component.html
<div *ngIf="!isUserAuthenticated">
<li class="nav-item">
<a class="nav-link" href="/"> EX FALSE </a>
</li>
</div>
<div *ngIf="isUserAuthenticated">
<li class="nav-item">
<a class="nav-link" href="/"> EX TRUE </a>
</li>
</div>
navbar.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
isUserAuthenticated = true;
constructor() { }
ngOnInit() { }
public authenticate() {
this.isUserAuthenticated = false;
return this.isUserAuthenticated;
}
public deauthenticate() {
this.isUserAuthenticated = true;
return this.isUserAuthenticated;
}
}
homepage.component.ts
import { Component, OnInit } from '#angular/core';
import { NavbarComponent } from '../navbar/navbar.component';
#Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
constructor( ) {
}
ngOnInit() {
console.log("here");
this.deauthenticate();
}
public deauthenticate()
{
const comp2 = new NavbarComponent();
comp2.deauthenticate();
console.log(comp2.deauthenticate());
}
}
dashboard.component.ts
import { Component, OnInit } from '#angular/core';
import { NavbarComponent } from '../navbar/navbar.component';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor( ) {
}
ngOnInit() {
this.authenticate();
}
public authenticate()
{
const comp2 = new NavbarComponent();
comp2.authenticate();
console.log(comp2.authenticate());
}
}
I want that dashboard component shows "EX TRUE" in NavBar and homepage component shows "EX FALSE" in NavBar.

Answer 1

As mentioned in comment you need to create service for authentication check this for full example
#Injectable()
export class AuthenticationService {
authenticated$: BehaviorSubject<boolean> = new BehaviorSubject(false);
public authenticate() {
this.authenticated$.next(true);
}
public deauthenticate() {
this.authenticated$.next(false);
}
}
you inject it this way to be able to use it in template
import { Component } from '#angular/core';
import { AuthenticationService } from '../authentication/authentication.service';
#Component({
selector: 'my-navbar',
templateUrl: './navbar.component.html',
styleUrls: [ './navbar.component.css' ]
})
export class NavbarComponent {
constructor(
public authenticationService: AuthenticationService,
) {
}
}
and then in template you can do this
Authenticated {{ authenticationService.authenticated$ | async }}
<div *ngIf="(authenticationService.authenticated$ | async) === true">
<li class="nav-item">
<a class="nav-link" href="/">EX TRUE</a>
</li>
</div>
<div *ngIf="(authenticationService.authenticated$ | async) === false">
<li class="nav-item">
<a class="nav-link" href="/">EX FALSE</a>
</li>
</div>
<button (click)="authenticationService.authenticate()">Authenticate</button>
<button (click)="authenticationService.deauthenticate()">Deauthenticate</button>
Although i would suggest using ngSwitch in this case like this:
<div>
<li class="nav-item" [ngSwitch]="authenticationService.authenticated$ | async">
<a class="nav-link" href="/" *ngSwitchCase="true">EX TRUE</a>
<a class="nav-link" href="/" *ngSwitchDefault>EX FALSE</a>
</li>
</div>
Also if you want separate state for some parts of your site you can do it like this:
#Component({
selector: 'my-homepage',
templateUrl: './homepage.component.html',
styleUrls: [ './homepage.component.css' ],
// this way you have a separate instance of AuthenticationService here anything that will use this service and is rendered under this component will use a localized version of this service
providers: [AuthenticationService],
})
export class HomepageComponent {
constructor(
public authenticationService: AuthenticationService,
) {
}
}

Answer 2

That is not how things are designed to work. For this scenario, you need to create a Service such as AuthService which will be shared across both component.
AuthEventSvc
export class AuthEventSvc{
private authEvent = new BehaviorSubject<boolean>(true);
constructor(){}
emitAuthStatus(state: boolean){
this.authEvent.next(state);
}
authListener(){
return this.authEvent.asObservable();
}
}
and then emit from HomeComponent
export class HomepageComponent implements OnInit {
constructor(private authEvent: AuthEventSvc ) {
}
ngOnInit() {
this.authEvent.emitAuthStatus(false);
}
}
and subscribe it in NavBarComponent
export class NavbarComponent implements OnInit {
isUserAuthenticated = true;
authSubscription : Subscription;
constructor(private authEvent: AuthEventSvc) { }
ngOnInit() {
this.authSubscription = this.authEvent.authListener().subscribe(state => {
this.isUserAuthenticated = state;
})
}
ngOnDestroy(){
this.authSubscription.unsubscribe(); // make sure to unsubscribe
}
}
You should also read about how change detection works and how NgZone is used in Angular to get more clarity as these topics require a long article for explanation. I am just giving you some breadcrumbs to help you understand better :)