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.

the navbar being accessible should NEVER pose a security risk. there's no such thing as front end security. hiding things with css vs javascript should be a performance based decision, NEVER a security based decision. — bryan60, May 23 '20 at 16:45
Check out this one: https://stackoverflow.com/questions/43118592/angular-2-how-to-hide-nav-bar-in-some-components — Manish, May 25 '20 at 05:33

score 0 · Answer 1 · answered May 23 '20 at 16:18

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;
   }
}

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

1 Answers1