Learn Free Angular

Redirect to New Component using Angular 7 Routing Service

Rawat Digamber /  Read Time: 3 minutes

Redirect Angular 7

Hello folks! Today I am going to talk about how you can redirect to new pages or components using Angular 7 routing service. Usually when your app initializes it redirects to the empty route by default. Angular offers powerful routing system to redirect to your favorite routes. We setup app-routing.module.ts file to maintain redirection service in Angular. After setting up app-routing.module.ts file we can configure the Angular routing service to redirect to named URLs.

Step: 1 – 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 { }

Step: 2 – Register AppRoutingModule in app.module.ts

Go to app.module.ts file, paste the given below code for creating navigation service in your Angular 7 app.

// App routing modules
import { AppRoutingModule } from './shared/routing/app-routing.module';

@NgModule({
  declarations: [...],
  imports: [
    AppRoutingModule
  ],
  providers: [...],
  bootstrap: [...]
})

Step: 3 – How to create app-routing.module.ts file for Angular 7 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 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.

Step: 4 – 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.

Feel free to contact me if you’re looking for a Freelance Angular 2 web developer, I also offer remote contracting services to clients around the world.

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional programming. I love to create modern web and mobile apps using Node JS, Mongo DB, React JS, Angular 2+, Firebase Real-time NoSQL Database, Ionic Framework, Object Oriented JavaScript, RxJS, TypeScript, jQuery etc...