I’m new to Angular. I’ve been watching tutorials on YouTube and all of them teach routing with a sticky navigation bar. Is it possible to click on a link and navigate into a completely new page without the navigation bar?
This is the index.html displaying. The blue words are navigation and are routed.
I’m trying to route into the Login Page without the navigation bar showing. Is it possible to do that?
Here is the code for the index.html and the app.component.html just in case its necessary
Yes it is possible to navigate to the login page and have the navigation bar not showing in that login page.
One way to achieve this, is by removing the navigation bar from view when the current route is /login. Create a boolean property in app.component.ts that will represent if the route's current state is /login.
app.component.ts could look like this:
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
isLoginPage: boolean;
constructor(private router: Router) {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
this.isLoginPage = this.router.url === '/login';
});
}
}
Then bind this boolean property to the navigation bar with *ngIf directive.
In app.component.html:
<div *ngIf="!isLoginPage" id="temporary-navigator style="text-align: center;">
...
</div>
You can achieve this by removing <app-nav-menu></app-nav-menu> tag from app.component.html and add it to individual components that require the nav menu
With that, the nav menu won't be included in routed components unless you add it to the component