Im trying to give this navbar a new links when a user is log in. But when i login the layout does not change for example when a user log in i want to give user the option to logout but the component keeps giving me the login option
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="assets/blacklogo.png" alt="Promme" width="30" height="24">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" *ngIf="!login">
<a class="nav-link active" aria-current="page" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/deals">Deals</a>
</li>
</ul>
<div class="d-flex">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" *ngIf="login == false" routerLink="/login">
<a class="nav-link " aria-current="page">Login</a>
</li>
<li class="nav-item" *ngIf="login == true" (click)="logout()">
<a class="nav-link " aria-current="page">Logout</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
This is the TS component i event try using OnChange but still no results
import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {AuthService} from "../../service/auth.service";
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit,OnChanges{
login: Boolean | undefined;
constructor(private auth:AuthService) {
}
ngOnInit(): void {
console.log(this.isLogin())
console.log("change")
}
isLogin(){
return this.auth.isUserLoggedIn()
}
logout(){
this.auth.logout()
}
ngOnChanges(changes: SimpleChanges): void {
if (this.isLogin()){
this.login=true;
}else {
this.login=false;
}
}
}
i have try using onchange but its still the same
2
Answers
*ngIf="auth.isLogin()"
isLogin(): boolean { // logic what to return}
no need for onChange
try this way: