I'm writing a public web page at work, with angular 9, where the array of possible routes depends on the user's role. I get the role from an HTTP request and the response updates an observable, that will be passed to a child component.
the problem is: the response is received but the template is not updated.
here it is components code:
@Component({
selector: 'navbar',
template: `<nav-template [routesArray]="routesArrayObservable | async"></nav-template>`
})
export class NavbarComponent implements OnInit {
private routesSubject: BehaviorSubject<AppRoute[]>;
routesArrayObservable: Observable<AppRoute[]>;
constructor(private accountService: AccountService) {
this.routesSubject = new BehaviorSubject<AppRoute[]>(null);
this.routesArrayObservable = this.routesSubject.asObservable();
}
ngOnInit(): void {
this.accountService.subscribableRole().subscribe((actualRole: string) => {
this.routesSubject.next(ruoli[actualRole]);
});
}
}
@Component({
selector: 'nav-template',
templateUrl: './navbar.component.html',
})
export class NavbarTemplate implements OnInit, OnChanges{
@Input() routesArray: AppRoute[];
user: Observable<User>;
constructor(private accountService: AccountService){
this.user = null;
}
ngOnInit(): void {
this.user = this.accountService.user;
}
ngOnChanges(changes: SimpleChanges){
for (let propName in changes) {
if (propName === 'routesArray'){
this.routesArray = changes[propName].currentValue;
}
}
}
}and HTML template:
<nav class="navbar navbar-expand navbar-dark bg-dark" *ngIf="user | async">
<div class="navbar-nav" *ngIf="routesArray.length">
<a *ngFor="let route of routesArray" class="nav-item nav-link"
routerLink="{{ route.routerLink }}">{{ route.name }}</a>
</div>
<div class="nav-account">
<nav-account></nav-account>
</div>
</nav>