Angular Routing Tutorial Step by Step from Scratch

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?

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 7 – Tutorial

 

Step1: 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

Step2: Import Router Module

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

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

Step3: 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
)

Step4: 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
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 facebooktwitter, and Google+.

 
 
 

 

 

 

 

Subscribe to our Newsletter

Stay up to date! Get all the latest posts delivered straight to your inbox.

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment