How to force redirect to a particular route in angular?

Introduction:

We can use the property binding concept and we can pass query parameters to routerLink. Using Property binding we can bind queryParams property and can provide the required details in object.

Property Binding: It is a concept where we use square bracket notation to bind data to Document Object Model(DOM) properties of Hypertext markup language(HTML) element.

import {Component, OnInit} from '@angular/core'
 
@Component({
 
selector:'app-property',
template:
`<p [textContent]="title"></p> 
`
})
 
export class AppComponent implements OnInit{
 
constructor(){}
ngOnInit() {}
 
title='Property Binding example in GeeksforGeeks';
 
}

Output:

We can implement the route re-direction in two ways:
1) The first method is by doing from .html file.
2) The second method is from the .ts file.

Syntax for .html file:
 

<a [routerLink]="[/path]" >
   State Details 
</a>

• Approach:

  • First, configure the routes in app.module.ts
  • Implement routerLink property binding with the required path in HTML file.
  • After mentioning the above instructions, then we can click on the configured HTML element and can redirect it.
  • Once you are done with clicking it it will automatically redirect you to another component.
  Implementation by code:
  app.module.ts:
  javascript

  import { NgModule } from "@angular/core";
  import { BrowserModule } from "@angular/platform-browser";
  import { RouterModule, Routes } from "@angular/router";
  
  import { AppComponent } from "./app.component";
  import { StateComponent } from "./state/state.component";
  
  const routes: Routes = 
    [{ path: "punjab", component: StateComponent }];
  
  @NgModule({
      imports: [BrowserModule, RouterModule.forRoot(routes)],
      declarations: [AppComponent, StateComponent],
      bootstrap: [AppComponent],
  })
  export class AppModule {}
  

  app.component.html:

  html

  <a [routerLink]="['/punjab']">
     State Details 
  </a>
  <router-outlet></router-outlet>
  

  After clicking on the anchor tag, then we can see that the url will be changed in the following way and we will be directed to the configured component in the app.module.ts file.

  

  Output:
  state.component.html:
   

  

• Second method from .ts file:

  Approach:
  • First, configure the routes in app.module.ts
  • Implement routing by importing 'Router' from '@angular/router'.
  • Then initialize the router in the constructor.
  • After doing the above process, then implement routing in a function so that the function can be triggered from .html file.
  • Once everything is done then we can force redirect the route to another component.
  Implementation By code: app.module.ts:
  javascript

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule, Routes } from '@angular/router';
   
  import { AppComponent } from './app.component';
  import { StateComponent } from './state/state.component';
   
  const routes: Routes = [
    { path: 'punjab', component: StateComponent },
  ];
   
  @NgModule({
    imports:      [ BrowserModule, RouterModule.forRoot(routes) ],
    declarations: [ AppComponent, StateComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  

  app.component.ts:

  javascript

  import { Component, OnInit } from '@angular/core';
  import {Router} from '@angular/router';
  
  
  @Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.css']
  })
  export class HomeComponent implements OnInit {
  
    constructor(private router:Router) { }
   
   ngOnInit(){}
   onSelect(){
        this.router.navigate(['/punjab']);
   }
  }
  

  
  app.component.html:

  html

  <a (click)="onSelect()">
     State Details 
  </a>
  <router-outlet></router-outlet>
  

  After following the above code and one if you click on the anchor tag then the url will be changed and you will be redirected to the respective configured component.

  

  Output: