Angular 6 for Enterprise-Ready Web Applications

Conditional navigation

Conditional navigation is necessary in creating a frustration-free user experience. By selectively showing the elements that the user has access to and hiding the ones they don't, we allow the user to confidently navigate through the app.

Let's start by hiding the login component after a user logs in to the app:

1. On the home component, import the authService in home.component
2. Set the authStatus to a local variable named displayLogin:

src/app/home/home.component...import { AuthService } from '../auth/auth.service'...export class HomeComponent implements OnInit {  private _displayLogin = true  constructor(private authService: AuthService) {}  ngOnInit() {    this.authService.authStatus.subscribe( authStatus => (this._displayLogin ...