How to force redirect to a particular route in angular? - GeeksforGeeks

15 Sep, 2020
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.tsImplement 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: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:<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: 
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:
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:
<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.tsImplement 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: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: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:<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:
Second method from .ts file:
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:
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:
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:
<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:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills