Skip to content
Related Articles

Related Articles

How to force redirect to a particular route in angular?
  • Last Updated : 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.

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
Recommended Articles
Page :