I'm struggling to update my template when changing a boolean property that is referenced in another array property. I expected the changes to reflect in my template, but they are not showing up.
Upon initial load, everything appears in its initial state (false: Login is visible and Logout is hidden). However, when the isLogged boolean changes, the navigation does not update to display the correct item.
I suspect this issue lies in how Angular handles change detection on objects and arrays, but I'm uncertain.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public isLogged: boolean = false;
public navigation: INav = {
links: [
{
text: 'Login'
hidden: !this.isLogged
},
{
text: 'Logout'
hidden: this.isLogged
}
]
}
public ngOnInit(): void {
// Triggered whenever the login state changes
this.authService.loginState().subscribe(state => {
this.isLogged = state;
});
}
}
<third-party-nav [model]="navigation"></third-party-nav>