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.
|
1 |
ng new router |
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.
|
1 2 3 |
ng g c home ng g c about ng g c contact |
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.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Component } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; //Home Component import { AboutComponent } from './about/about.component'; //About Component import { ContactComponent } from './contact/contact.component'; //Contact Component @NgModule({ declarations: [ AppComponent, HomeComponent, //Home Component AboutComponent, //About Component ContactComponent //Contact Component ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AboutComponent } from './about/about.component'; import { ContactComponent } from './contact/contact.component'; import { HomeComponent } from './home/home.component'; // Define Routing Path const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div> <h1> Welcome to {{ title }}! </h1> </div> <h2>Navigating Routes with Angular</h2> <ul> <li> <a routerLink="home" routerLinkActive="active">Home</a> </li> <li> <a routerLink="about" routerLinkActive="active">About</a> </li> <li> <a routerLink="contact" routerLinkActive="active">Contact</a> </li> </ul> <router-outlet></router-outlet> |
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:
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.
