Let's Develop an Angular Application - Create a Navigation Bar Component

Introduction 

 

This is the 7th article in my 'Let's develop an Angular application' article series. So far, we created an angular application and a few components, created a model class for our Bike entity, and created an array of hardcoded Bike details. Then, we displayed the bike details in the hard-coded array using ngFor. Also, we installed and applied a few bootstrap classes to improve the UI.

 

Please go through the previous articles to get an overall idea of what we are trying to achieve.

 

 To read my previous article, click here >> #6 - Bootstrap installation and Usage

 

At present, our application UI looks like the below screenshot.

 

Since we are creating a web application, it would be good to have a navigation bar. Let's create a new component for navigation bar. Last time, we used the ng generate component command to create a component. This time, we can try to create the component manually. Please follow the below steps to create and configure the component manually.

 

Note

This is not mandatory - we can simply use the ng g c command to create the component, but there is another possible way for sharing  )

1. Create a new folder ‘navigation-bar’ under the app folder (Rclick app -> New Folder)
2. Create a typescript file ‘navigation-bar.component.ts’ file inside the new folder (RClick navigation-bar -> New File )
3. Create an HTML file ‘navigation-bar.component.html’ inside the new folder
4. Create a CSS file ‘navigation-bar.component.css’ inside the new folder 

 

Open the ‘navigation-bar.component.ts’ file

 

Create a class ‘NavigationBarComponent’

export class NavigationBarComponent
{
}

This is just a normal typescript class. We need to convert this into Component class.

 

To do this, we use the @Component() decorator

 

Add the code on top of the NavigationBarComponent class

import { Component } from '@angular/core';

@Component({
    selector:'app-navaiagation-bar',
    templateUrl:'./navigation-bar.component.html',
    styleUrls:['./navigation-bar.component.css']
    })

Now our component type script file will look like below screenshot.

 

 

To get more details about Angular components, visit >> https://angular.io/guide/architecture-components. Next, we need to register the component in app.module.ts Open the app.module.ts file and add the class name ‘NavigationBarComponent’ in declaration array of the @NgModule decorator. Also, import the class from './navigation-bar/navigation-bar.component'.

 

Please refer to the screenshot below:

 

 

That’s all. Success!

 

We have created a component manually and registered correctly. Let’s check whether our new component working or not. Add a <div> element inside our navigation-bar.component.html file as below Provide the bootstrap classes navbar and navbar-default, as in the below screenshot.

 

 

Open the app.component.html file and add our component using its selector as shown below:

 

 

 

Save the files and check the browser. We can see a navbar created in our application as shown in the below screenshot.

 

 

 

So, it’s working as expected!

 

Next, we have to create the navbar header and navbar menus. We can use below 2 bootstrap classes to do this

•  navbar-header
• navbar-nav

I have added the HTML element to create a navbar header and navbar menus.

 

The menus are just dummies. We will add the angular routing soon.

 

Please refer the screenshot below:

 

 

Save and check the browser to see the result

 

Now we will see a screen like shown in the below screenshot:

 

Conclusion

 

In this article, we created a navigation bar component using the bootstrap classes and created a few dummy menus.

 

We will implement the angular routing shortly. In the next article, we will see how to display more bike details to the right of the tile.

 

 To read my next article, please click here >> #8 - Create detailed view component template for Bikes

 

Happy Learning!