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