Angular 5 Routing Navigation Using Bootstrap Navbar


In this article, we are creating angular 5 routing Navigation using Bootstrap navbar. if you are looking for a very attractive and amazing navigation. Then this article is for you. So in this article, we will look out angular routing with bootstrap navigation. We will create angular routing and then use bootstrap navbar for this routing.

we are creating this. So let’s get started.

In this tutorial, we are creating multiple views.

  • routing home

Angular 5 Routing Navigation Using Bootstrap Navbar

  • routing services

  • routing pricing

So in this article, we are creating this home, services, pricing, and about us navigation.

What is routing? simply routing is basically navigating from one view to another. So here we created multiple views using components. There we will first take a component as a view and then use this for routing.

So let’s jump into the code.

Create an Angular App

The first step to start making routing is to make an angular app. So we will create an angular application first. make sure you install latest npm in your system. To setup the complete environment read this article setup Angular Environment.

Use this command to create an angular app using CLI.

After creating an application we will create some components. We will use this component as a view. So following commands will create four components.

This command will create app-home component in your Angular app. So we will create some other components also.

Execute this commands and create some more components. So here we created app-services, app-pricing, app-about-us component.

Creating Bootstrap Navigation

Now we will first create Bootstrap navigation. To use bootstrap classes we need to link bootstrap cdn in our app. You can also import bootstrap framework using npm. but here we will use bootstrap framework using cdn.

Index.html

Find out Index.html file and link bootstrap framework.

In this file, you will see we link bootstrap framework cdn in the head section.

app.component.html

In the app.component.html file, we will create bootstrap navigation. we don’t create a separate component to design bootstrap navigation. So we will just use an app.component.html file to create navigation.

In this code, created a bootstrap navigation. But the difference is we replace the anchor tag with an angular anchor tag. In the anchor tag, we use routerLink attribute. Using this attribute we link angular routing view to the anchor tag. Import this code in the app.component.html file.

In the code, RouterLink directives give you the routing control over the element.

At the last, you will see the <router-outlet> tag. This tag will match the URL in the route path which we provide in the module.ts file.

app.module.ts

Now we need to import router module in the module file. Router module enables you to use router functionality in your app. So just import routing module using import from keywords.

Make sure this spelling is case sensitive so write it as it is.

In the import section of the module.ts file adds this code. This code will create a specific path for the specific component.

In this code, we created a code to link path to the view. So the app-home is the component name and AppHomeComponent is the class of app-home component.

So your Module.ts file looks like this.

In this code, you will see components are automatically added to the module file you don’t care about it.

After that insert some content in the components file which we created.

app-home.component.html

Insert some code for changing views.

app-services.component.html

Import this code into this file.

and also import this code into app-services.component.ts file

app-services.component.ts

we import this code into this file because we used the newcompo property in the class.

app-pricing.component.html

Import this code into this file.

app-about-us.component.html

Import following code into this file.

Now everything is done.

Run application

Run your app using this command.

Use this command to run your application. if you are already in the my-app folder then just execute server command.

This command will run your application.

Now you can navigation from one view to another using bootstrap navigation.

Angular 5 routing navigation using bootstrap navbar is completed.

If you have any question then comment me in the comment section.

Follow us on Facebook and Instagram. For more information subscribe to us on youtube.

Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *