Angular Routing

Implementing routing in an Angular application involves many small steps. Angular CLI does a pretty good job in having some of these routing steps implemented out of the box by just using --routing option.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Before we discuss, how we can use Angular CLI to implement routing let's setup routing manually so we understand all the moving parts as far as implementing routing is concerned.

Using the following command, first create a brand new Angular project using the Angular CLI.
ng new employeeManagement

We named it employeeManagement. Let's assume we are using this application to manage employees. Out of the box, Angular CLI has created the root component - AppComponent. In addition let's create the following 3 components
home : ng g c home
employees : ng g c employees
pageNotFound : ng g c pageNotFound

Steps to implement routing in Angular

Step 2 : Import the RouterModule into the application root module AppModule. The Router Module contains the Router service and Router directives such as (RouterLink, RouterLinkActive, RouterOutlet etc). So for us to be able to implement routing, we first need to import the Router Module in our AppModule.

Step 3 : Configure the application routes.

// Each route maps a URL path to a component
// The 3rd route specifies the route to redirect to if the path
// is empty. In our case we are redirecting to /home
// The 4th route (**) is the wildcard route. This route is used
// if the requested URL doesn't match any other routes already defined
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'employees', component: EmployeesComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

// To let the router know about the routes configured above,
// pass "appRoutes" constant to forRoot(appRoutes) method
// We also have forChild() method. We will discuss the difference
// and when to use one over the other in our upcoming videos
@NgModule({
declarations: [...
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 : Specify where you want the routed component view template to be displayed using the router-outlet directive

Step 5 : Tie the routes to application menu.

To install bootstrap execute the following npm command

"styles": [

At this point Routing should be working as expected.

The following are the directives provided by the RouterModule

routerLink
Tells the router where to navigate when the user clicks the navigation link

routerLinkActive
When a route is active the routerLinkActive directive adds the active CSS class. When a route becomes inactive, the routerLinkActive directive removes the active CSS class.

The routerLinkActive directive can be applied on the link element itself or it's parent. In this example, for the active route styling to work correctly, routerLinkActive directive must be applied on the list item element and not the anchor element.
router-outlet
Specifies the location at which the routed component view template should be displayed

At the moment routing is implemented in the root module - AppModule. However, for separation of concerns and maintainability, it is better to implement routing in a separate Routing module and then import that routing module in the AppModule. In a later video, we will discuss how to move routing into it's own routing module.

Text version of the video

Slides

Angular CLI Tutorial

Angular CLI Text articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[vaibhavtrikolikar]

Thank you sir for another great concept as usual :)

[phaobi]

Sir Venkat, You are really very great and you are contributing great things to the world, God bless you abundantly. But Sir if you can guide in the line of ethical hacking then we will learn more and more from you cos your way of explanation is so simply good and great.Have a great day Sir...!!!

[chrisstephens]

This tutorial is so basic the Angular docs cover this very well already, I'd like if it went into more programatic routing and nested routes etc.

[himanshu]

Hi Venkat. I have been following your tutorial series. ASP.Net, ASP.Net MVC, JavaScript, JQuery, Angular 2 and now Angular CLI.. Thanks a lot. Your tutorials are very descriptive and helpful..


I was facing few issues while trying to practice sample under video 17.
I am using Angular CLI: 9.1.1
and Node: 13.12.0.
I do not have angular-cli.json in the generated project.
Although I do have angular.json.
I added to Styles section under angular.json.
Bootstrap style were however not loading after the above step.
I did some googling and found below solution.

Step 1.
Inside .angular-cli.json file

"styles": [
"styles.css",

]

Remove

Step 2.
Go to styles.css

Import bootstrap by adding this line
@import



After this change bootstrap style got loaded in my project and started working.

[rameshGuptaranu]

Sir in my project there is not any angular.cli.json file, only have angular.json file
I installed the bootstrap and it shows in node_module folder. In angular.json file i put the path of bootstrap css file but out put is not showing as yours

[sashidhar]

Should be instead of ../node_modules in Angular 8

[josephregallis]

I had a problem with the path for Bootstrap. I had to use to get it to work. I tried using the path you gave us but that would not work. I kept getting an error that the module could not be found. I put this in here if anyone else runs into this error.

[gajamjyothi]

Hi, Could please help how to call external url's using routing application, that external page should open within the same application not in new page

[vijaykumar]

How To Reload A Component From Another Component For e.g. On A Page I Have 2 Componenet CMP-1 AND CMP-2 after few changes on CMP-1 Data should reflect on CMP-2

[sudhakarkgr]

Excellent. Please do more videos in angular 4

[vijaykumar]

How Routing Same Router with Different params Not Reflecting any Changes why any reasons For Example





On Router formControlViewData Reading Param
on First render it is reading Param
But when Triggering same Route with Param changes it not reflecting.


any specfic reasons

[sundali]

Not working properly.
imports: [
BrowserModule, RouterModule.forRoot(appRoutes)
],
Please add following export in appModule
exports: [RouterModule],

[ashishkumarmaurya]

routerLink directive giving parsing error ERROR, ERROR CONTEXT

[sashidhar]

Angular-cli.json is replaced with angular.json