Angular 14 Redirect to New Component with Routing Tutorial

Last updated on: by Digamber

Hello folks! Today I am going to show you how to redirect to new pages or components in Angular application using Angular routing service.

Angular offers powerful routing system to redirect to your favorite routes. Ideally, when your app initializes it redirects to the empty route by default.

So, first we have to setup app-routing.module.ts file to enable redirection service in Angular.

After setting up app-routing.module.ts file we can configure the Angular routing service to redirect to named URLs.

Generate App Routing File for Angular Redirection Service

ng generate module app-routing --flat --module=app
  • –flat adds the file in src/app folder rather than in its own folder.
  • –module=app orders the command linte tool to register it in the imports array of the app.module.ts.

Once the file is generated it will look like the following file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class AppRoutingModule { }

How to create app-routing.module.ts file for Angular 7|8|9 redirection service

import { NgModule } from '@angular/core';
// Required services for navigation
import { Routes, RouterModule } from '@angular/router';
// Import all the components for which navigation service has to be activated 
import { HomeComponent } from '../../components/home.component';
import { AboutComponent } from '../../components/about.component';
import { ProductsComponent } from '../../components/products.component';
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: '**', component: HomeComponent } // If no matching route found, go back to home route
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

We have successfully created Angular 7|8|9 redirect service using angular routes and RouterModule service.

Let’s understand what is going on in here.

redirectTo: ‘/home’: We are using this property within the routes array to tell angular route service if the users navigate to the empty URL they should be redirected to the home URL rather than the empty URL.

pathMatch: ‘full’: This property commands the Angular that an empty URL should match the exact string path not partially empty string.

path: ‘**’: These two stars are used for letting the Angular know If no matching route found, then go back to the mentioned route. In our case, we have declared HomeComponent.

In the next step, you have to update the code inside the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [AppRoutingModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

How to use Routing Service Attributes

<nav>
  <ul>
     <li><a routerLink="/home" routerLinkActive="active">Home</a></li>
     <li><a routerLink="/about" routerLinkActive="active">About</a></li>
     <li><a routerLink="/products" routerLinkActive="active">Products</a></li>
  </ul>
<nav>

As you can see we have created app routing service and integrated required components for which routing service needs to be activated.

Let’s check out what is going on in here.

  • routerLink=”/home”: This tag allows you to link to specific routes in your application.
  • routerLinkActive=”active”: This tag is used to allow active class on the clicked route.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.