Angular Router Tutorial: Everything You Need to Know

The Angular CLI is a command-line interface tool that can create a project, add files, and perform various ongoing development tasks such as testing, bundling, and deployment.

Angular Router Tutorial

For Single Page applications, Routing is the only tool, or we can say module, to navigate the pages to pages.

You can find its documentation on this website.

• https://angular.io/tutorial/toh-pt5

Step 1: Install The Angular Project.

Install Angular CLI globally on your system by typing the following command.

npm install -g @angular/cli

Now, create one project called ngRouter.

ng new ngRouter

Serve the application by the following command.

cd my-app
ng serve --open

Step 2: Make three components for the application.

Create one directory inside src  >>  app folder called components.

Next, make three components by typing the following command.

ng g c home
ng g c about
ng g c dashboard

It creates a separate folder inside the src  >>  app directory, and we need to move all these three folders inside the components folder for better project structure.

Step 3: Routing and Navigation.

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

First, we need to import the routing modules inside our app.module.ts file.

// app.module.ts

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

imports: [
    BrowserModule, RouterModule
],

Configuration

When you have created the components, its default path is different, and now we have moved the components, so now its path is different. So, first, we need to change that path in the app.module.ts file.

// app.module.ts

import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Okay, now we need to configure the routes. So make one file inside the app directory called routerConfig.ts file.

Write the following code in it.

// routerConfig.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

export const appRoutes: Routes = [
  { path: 'home', 
    component: HomeComponent 
  },
  {
    path: 'about',
    component: AboutComponent
  },
  { path: 'dashboard',
    component: DashboardComponent
  }
];

We have defined one array, and inside that array, we have registered the different routes with their components. Then, finally, we have exported it.

Now, import this object inside app.module.ts and register the module.

// app.module.ts

import { appRoutes } from './routerConfig';

imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
],

Step 4: Define the Router outlet.

In the app.component.html file, write the following code.

<!-- app.component.html  -->

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <nav>
    <a routerLink="home" routerLinkActive="active">Home</a>
    <a routerLink="about">About</a>
    <a routerLink="dashboard">Dashboard</a>
  </nav>
  <router-outlet></router-outlet>
</div>

Now, we have already changed the title inside the app.component.ts file.

// app.component.ts

title = 'Angular Router Tutorial';

Start the app with the following command.

ng serve --open

After the webpack compiles successfully, we can see the following page at http://localhost:4200/home.

That’s it for this tutorial. Thanks for the reading.