Angular Routing Tutorial Step by Step from Scratch

In this Tutorial, you will learn How to use angular routing in Angular2+ step by step from scratch.

so let ‘s get started…

What is Angular Routing?

Routing is a mechanism used by angular for navigating between pages and displaying appropriate components/pages on the browser.

The Angular Router enables navigation from one view to the next as users perform application tasks.

Angular Routing Tutorial Step by Step

For this Routing Demo Purposes, I assume you have already installed angular 2+ blank project installed, if not then you can create a new project by following this tutorial.

Also read,  How to install Angular 14 – Tutorial

Step-1: Generate Components

First of all, you have to generate a few components for routing demo purposes, so generate follow components one by one by typing below command in terminal.

ng generate component home

ng generate component products_list

Step-2: Import Router Module

Now you have to Import RouterModule in src/app/app.module.ts path

import { RouterModule, Routes } from '@angular/router';

Step-3: Router Configuration

Then above NgModule decorator add a new Constant and name it appRoutes it should hold all the routes for your application, as below:

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'products-list', component: ProductsListComponent }
];

Above each path points to particular component.

Now you need import RouterModule with forRoot method in imports array which allows us to register our routes for our main application.

They also need to add appRoutes constant as an argument to register routes.

RouterModule.forRoot(
    appRoutes
)

Step-4: Configure Router Links

We have configured Routing but how do Angular knows where to load router component of the active route, so to load specific component related to route you need to add router-outlet directive where you want to load route.

What is RouterOutlet?

The RouterOutlet is a directive from the router library that is used as a component.

It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

Now we have created routing you can navigate by typing URL in the browser but to make it navigatable by user click of an anchor tag replace following code with existing in src\app\app.component.html path.

<h1>Angular Routing Demo</h1>
<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a> |
  <a routerLink="/products-list" routerLinkActive="active">Product List</a>
</nav>
<router-outlet></router-outlet>

In your terminal type ng serve to run the application.

Now its Done,

you will see something likes this in your browser and working routing demo.

Angular_routing

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on facebook, twitter, and Google+.