Angular routing tutorial; in this comprehensive example, we would like to share with you how to create routes in the angular application and enable navigation in the angular app.

At the end of this quick tutorial, you will throughly understand how to navigate from one component to another component using an angular routing mechanism.

Ideally, in SPA (single page application), you don’t refresh the whole page by making a request to the server. Instead, you simply update the specific chunk or component that needs to be displayed to the user.

Hence, theoretically, to perform a particular action user needs to travel between components that are known views in simple terms.

To redirect from one component to another component, we need to enable the navigation. We take Angular router’s help to redirect to another component; a router in angular facilitates navigation by defining a URL that can be used by browsers to make the user transverse through the application.

Angular 13 Routing Navigation Example

• Step 1: Create Angular App
• Step 2: Generate Angular Components
• Step 3: Create Routes in Angular
• Step 4: Redirect to Components in Angular
• Step 5: Create Angular Wildcard Routes
• Step 6: Start Development Server

Create Angular App

You must have node npm configured on your syste, once both the tools installed properly, then run command to install angular CLI tool:

npm install -g @angular/cli

Further, use the command on the terminal to create a new basic angular app.

ng new angular-routing-example

Make sure to choose yes related to the following question:

Would you like to add Angular routing? Yes

Plus, don’t foreget to enter into the project folder:

cd angular-routing-example

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Generate Angular Components

We need some components so that we can create routes for associated component, likewise head over to console and execute the command to generate a handful of components:

ng generate component dashboard

ng generate component profile

ng generate component checkout

Create Routes in Angular

At the time of app installation, angular cli asked, “Would you like to add Angular routing?” and we chose yes, due to which we have got the src/app-routing.module.ts file, hence move inside the file.

Inside here, we will create angular routes for every component that needs to be displayed in the view.

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

import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'profile', component: ProfileComponent },
  { path: 'checkout', component: CheckoutComponent },  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Redirect to Components in Angular

Add the following code in the angular HTML template, this code will enable the navigation in angular, and by clicking on the individual link, it will display the content associated with a particular component.

<nav>
  <ul>
    <li><a routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
    <li><a routerLink="/profile" routerLinkActive="active">Profile</a></li>
    <li><a routerLink="/checkout" routerLinkActive="active">Checkout</a></li>
  </ul>
<nav>

<router-outlet></router-outlet>

The routerLink directive takes the route name that we defined in the AppRoutingModule; on top of that, routerLinkActive adds the active class to the currently activated component through the angular router.

The router-outlet directive displays the component’s content when the user navigates to the related component.

Create Angular Wildcard Routes

In the next step, we learn to create Wildcard Routes in the Angular app.

For instance, we have defined three routes in our angular app, but somehow if you enter an undefined route or URL on the browser, then the angular app throws the error.

Wildcard routes solve this problem, and if no matching routes or link are found, then it will redirect to pre-defined or wild card route in the angular app using angular routes mechanism.

Open app-routing.module.ts file and update the following code:

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

import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'profile', component: ProfileComponent },
  { path: 'checkout', component: CheckoutComponent },  

  { path: '**', component: DashboardComponent } // Wildcard Route
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Here is the list of valid routes we created so far:

http://localhost:4200/dashboard

http://localhost:4200/profile

http://localhost:4200/checkout

Now, if you use wrong url:

http://localhost:4200/10sd0f0

Then you will see wildcard route will redirect you to dashboard component and load in the view.

Start Development Server

Next, use command to start the angular application:

ng serve --o

Conclusion

This angular routing tutorial is over; in this example, we learned how to create routes in angular using angular routing.

We have discovered how to redirect to another component, add an active class in angular routes, and additionally, we learn how to create or add wildcard routes in angular.