How Do I Redirect To Another Page After Register In Angular 5

How to force redirect to a particular route in angular?

Introduction:

Nosotros can use the holding bounden concept and we tin can pass query parameters to routerLink. Using Holding bounden we can bind queryParams holding and tin provide the required details in object.

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

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

Output:

Nosotros can implement the route re-direction in ii means:
one) The first method is past doing from .html file.
two) The second method is from the .ts file.

Syntax for .html file:

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

- Outset, configure the routes in app.module.ts
- Implement routerLink belongings binding with the required path in HTML file.
- Afterward mentioning the above instructions, then we can click on the configured HTML element and tin can redirect it.
- Once you are done with clicking it it will automatically redirect you to another component.
Implementation by lawmaking:
app.module.ts:

import { NgModule } from "@angular/cadre" ;

import { BrowserModule } from "@angular/platform-browser" ;

import { RouterModule, Routes } from "@angular/router" ;

import { AppComponent } from "./app.component" ;

import { StateComponent } from "./land/state.component" ;

const routes: Routes =

[{ path: "punjab" , component: StateComponent }];

@NgModule({

imports: [BrowserModule, RouterModule.forRoot(routes)],

declarations: [AppComponent, StateComponent],

bootstrap: [AppComponent],

})

export course 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 exist changed in the following way and we will exist directed to the configured component in the app.module.ts file.

Output:
land.component.html:
Second method from .ts file:
- First, configure the routes in app.module.ts
- Implement routing by importing 'Router' from '@angular/router'.
- So initialize the router in the constructor.
- After doing the above procedure, then implement routing in a part so that the part tin can be triggered from .html file.
- One time everything is done then we tin can force redirect the road to some other component.
Implementation By code:
app.module.ts:

import { NgModule } from '@angular/cadre' ;

import { BrowserModule } from '@athwart/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 form 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 in a higher place code and one if yous click on the anchor tag then the url volition be changed and you volition be redirected to the respective configured component.

Output: