#4 🧭Add Navigation
Add Navigation Bar
We will create a new navigation bar component by making a right-click on the folder 📁components
. Navigate to 'Angular Generator' and select 'Component' and provide the name ‘nav-bar’.
Open src/app/components/nav-bar/nav-bar.component.html
and replace what is there with the following code.
We will add the styling for nav bar 📝src/app/components/nav-bar/nav-bar.component.scss
as shown below
Create the Home Page
We will create another component named HomeComponent. Let’s make a right-click on the folder 📁components
. Navigate to 'Angular Generator', select 'Component' and provide the name ‘home’.
For now we will not add any code to HomeComponent
. We will revisit this component in a later part of this workshop.
Add Router module
We will add the RouterModule
into 📝src/app/app.module.ts
as shown below.
Update the AppComponent
AppComponent
Open 📝src/app/app.component.html
and replace the content of the file with the following code.
Add the following styles to 📝src/styles.scss
:
Last updated