Navbar Component

Let's add the navbar component to handle navigation in our app.

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
Terminal 1
Terminal
Loading...

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 ...

Get hands-on with 1400+ tech skills courses.