Home » Angular » Angular Routing with Active Links

Angular Routing with Active Links

Angular is the most popular front-end framework for building a website or application. Now we going to see about the Angular routing with active links with the website or application. The Angular router is a prebuilt library and it imported as a @angular/router in your Angular project. This makes all the possibilities such as multiple router outlets, different route strategies, easy route access and protecting components from unauthorized access. Which makes Angular to build single page application with the multiple views.

Step 1: Install the Angular project.

Before Routing first, you need to install the Angular project for that use the below command to create your new Angular project.

If you need to know more about the Angular installation here you have an article

Note: Here I used Angular 9 for the Routing with active links.

Step 2: Create new three components in your Angular app.

Now create a new three components as home, about, contact in your Angular app. Follow the below commands which help you to create components.

g – “generate” c – “component”

Step 3: Import created three components.

Import created three components inside the src >> app >> app.module.ts Below you have the code use like as same. Also the router needs a <base href="/"> to be set in the index.html section.

Note: If you are using the Angular latest version don’t worry, the components automatically import the components in your app.module.ts

Step 4: Configure routing in your app-routing.module.ts

Now setup routes path in your src >> app >> app-routing.module.ts as like the below code.

Above you can see, we define the created component routes path and path name with the component and component name.

Step 5: Define the Router with active links

Now open and add the routerLink in your app.component.html as like the below.

In the normal HTML site, we use like <a href="about.html">About</a> but here instered of that, we going to use Angular route concept with routerLinkActive, like this <a routerLink="about" routerLinkActive="active">About</a>

Once you completed all the steps now run the command ng serve --open and see the output with an active link. For your reference below you have the output how it looks like.

Output:

Angular Router with Active links Tutorial softaox

Conclusion:

I hope this article will help you to understand the basic configuration of routing. If you have any other doubts use the comment box to let me know. If this article helped you a lot, share it with your friends.

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply

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

Back to top