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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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';
   
}

chevron_right


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:
 

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    app.component.html:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    app.component.ts:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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']);
     }
    }

    chevron_right

    
    

    app.component.html:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.