Navbar Component
Explore the process of building a dynamic navigation bar in Angular that reflects user login states using AuthService and Bootstrap styles. Understand how to integrate the navbar into all app views, manage authentication status with Angular lifecycle hooks, and resolve common testing issues with CUSTOM_ELEMENTS_SCHEMA.
We'll cover the following...
We’ve now completed user signup, logging them in automatically and redirecting them to a dashboard. We also have a route guard in place to prevent unauthorized users from accessing the dashboard. In this chapter, we’re going to add Bootstrap’s navbar to reflect our logged-in and logged-out states, updating some links in the navbar based on their status.
Component setup
First, we’ll create the component. There’s no need for a module here because the component only consumes one service (AuthService) which is provided by AppModule. Additionally, our navbar has no routing module of its own, since it’s a component that will be shown in every view within our application.
ng g component navbar
This should be the terminal output.
CREATE src/app/navbar/navbar.component.css
CREATE src/app/navbar/navbar.component.html
CREATE src/app/navbar/navbar.component.spec.ts
CREATE src/app/navbar/navbar.component.ts
UPDATE src/app/app.module.ts
This command created a new ...