Hide the content of app.component file from a single component in Angular

Question

So I am trying to create an Angular app which will ask you to log in before accessing it. I am trying to keep the navbar in the app.component file so it is reused on all the components, but I want to get rid of it on the login page. I thought of just hiding it using CSS, but that might pose a security risk since the navbar will have other routes as well.

I was also thinking of leaving the app.component idea and creat a child navbar component which will be reused in every component, but I'm not sure if that's the best way to do this. Any ideas are greatly appreciated.

Answer 1

I believe you are having login component in router outlet. Update it like

<nav-bar *ngIf="showNavBar"></nav-bar>
<router-outlet (activate)="toggleNavBar($event)"></router-outlet>

in app component

public showNavBar = true;

toggleNavBar(component) {
   if(component instanceof LoginComponent) {
      this.showNavBar = false;
   } else {
      this.showNavBar = true;
   }
}