Angular 16 Redirect to New Component with Routing Tutorial

Last Updated on by in Angular

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.

Set up Angular Project

Install the Angular CLI with below command.

npm install @angular/cli -g

Now, you have to install the brand new Angular project using below command.

ng new angular-demo

Angular CLI asks for your choices while setting up the project…

Would you like to add Angular routing?
Select y and Hit Enter.

Which stylesheet format would you like to use? (Use arrow keys)
Choose SCSS and hit Enter

Use command to navigate into the project directory:

cd angular-demo

Remove Angular TypeScript Errors

Make sure to set following properties to false in tsconfig.json file:

"compilerOptions": {
 ...
 ...
   "strict": false,
   "noPropertyAccessFromIndexSignature": false,
 ...
 ...
},
  "angularCompilerOptions": {
    "strictTemplates": false
  }

In order to activate routing in Angular, we need components because in Angular navigating from one point to another is done on the basis of
components.

Here is the command that you have to execute:

ng g c components/home
ng g c components/about
ng g c components/products

How to create app-routing.module.ts file for Angular redirection service

Let us create a robust mechanism that helps define and manage the navigation paths within your angular application.

Angular provides a powerful routing module called RouterModule, we will create the various routes using Router module service.

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

// Import all the components for which navigation service has to be activated
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { ProductsComponent } from './components/products/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 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';

import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { ProductsComponent } from './components/products/products.component';

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent, ProductsComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

How to use Routing Service Attributes

You have to define the routes and set up the router-outlet directive in the app.component.html file:

<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>

<router-outlet></router-outlet>

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.

The following command will execute the development server and serve your app on the browser:

ng serve --open