Angular Routing

4 min readAug 27, 2020

This blog will show the basic Routing in Angular.

Why we will use routing in angular projects?

Routing help to navigating from one page to another page.

Starting Angular project…….

you start to creating angular project it will ask to you “do you like to add routing ?” if you say yes(Y) then it’s automatically created the routing module.

if you say No(N) then app-routing-module.ts not create. So you want to create the routes

how to create the routes.

import the {Routes ,RouterModule} in to app.module.ts

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

2. define an array of your paths and destination pages.

const routes: Routes = [

{path:” ”,redirectTo:”FirstComponent”,pathMatch:”full”},

{path:”first” ,component:FirstComponent},

{ path:’second’,component:SecondComponent}

];

pathMatch is specifying a strict matching of path to reach the destination page.

3.finally you pass the routes array to RouterModule .

RouterModule.forRoot(routes)

{path:” ”,redirectTo:FirstComponent,pathMatch:”full”}=> this mean we have not provide any path to this object but we are redirect the path to ‘FirstComponent’ path using “redirectTo” key.

<router-outlet></router-outlet> this router directive from the router library. it is used to directing the router where to display the routes views.it is automatically added to app.component.html file.you can change it where want to display .

use routerLink to change the page.

<a routerLink=”/second” >Go to second page</a>

use the above code in template . the current page go to the second page

This is the basic rounting in angular

Parent ,Child Routing…….

create the parent component with 2 functionalities child1() & child2().
create 2 child component child1 & child2.
we need to configure our component which is parent route and which is child routes.

I will create the School is parent component then ClassA and ClassB are child component.next we will see how to configure the routes.

First we shoud import the ActivatedRouter & Route into SchoolComponent.ts

SchoolComponent.html file must contains 2 button to help us to reach the paths and router-outlet also included atlast.

if we click the button class A then the classA() function from SchoolComponent.ts will be called .then the function redirect the path where want to go.

The object { relativeTo: this.router} ensures that the path remains relative to its parent path.

Finally, we need to configure our Angular Application that ClassA and ClassB are the child routes of School. We must declaring the children[] and define the path and component inside the array.

Next we will see the path with id…….

continue with above scenario if we want to select the 1 sudent from classA or ClassB we use path with id

first import the student details with id in classA and ClassB .ts file .

next write the code in .html file to veiw the students details

in here I mentioned Caption button .when I click the button it is called the ClassA() function using with id.

in here ClassA() function navigate the path with id . then we want configure that path where we want to go.As you can see the functions navigates to the path according to the id passed in the URL.

We will do the same step in to ClassB .

I created StudentsComponent and I mention that path go to StudentComponent. So when we click the Caption button it will go to the StudentsComponent.

now we have the path url but we want to print the Id in the display so we want to extract the id from that URL.

we should import ActivatedRoute Module into StudentsComponent.ts to obtain the selected id from the URL,this module contains the paramMap method which return the observable. whenever the URL id changes, angular updates the binding in the view.