Angular : Manual redirect to route
AngularAngular Problem Overview
I just recently started using angular 4 instead of angular.js 1.
I have followed the heroes tutorial to learn about the fundamentals of angular 4 and I am currently using angular's own "RouterModule" from the "@angular/router" package.
In order to implement some authorization for my application I would like to know how to manually redirect to another route, I can not seem to find any useful information about this on the internet.
Angular Solutions
Solution 1 - Angular
Angular routing : Manual navigation
First you need to import the angular router :
import {Router} from "@angular/router"
Then inject it in your component constructor :
constructor(private router: Router) { }
And finally call the .navigate
method anywhere you need to "redirect" :
this.router.navigate(['/your-path'])
You can also put some parameters on your route, like user/5
:
this.router.navigate(['/user', 5])
Documentation: Angular official documentaiton
Solution 2 - Angular
Redirection in angularjs 4 Button for event in eg:app.home.html
<input type="button" value="clear" (click)="onSubmit()"/>
and in home.componant.ts
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.home.html',
})
export class HomeComponant {
title = 'Home';
constructor(
private router: Router,
) {}
onSubmit() {
this.router.navigate(['/doctor'])
}
}
Solution 3 - Angular
You should inject Router in your constructor like this;
constructor(private router: Router) { }
then you can do this anywhere you want;
this.router.navigate(['/product-list']);
Solution 4 - Angular
Angular Redirection manually: Import @angular/router
, Inject in constructor()
then call this.router.navigate()
.
import {Router} from '@angular/router';
...
...
constructor(private router: Router) {
...
}
onSubmit() {
...
this.router.navigate(['/profile']);
}
Solution 5 - Angular
This should work
import { Router } from "@angular/router"
export class YourClass{
constructor(private router: Router) { }
YourFunction() {
this.router.navigate(['/path']);
}
}
Solution 6 - Angular
Redirect to another page using function on component.ts file
componene.ts:
import {Router} from '@angular/router';
constructor(private router: Router) {}
OnClickFunction()
{
this.router.navigate(['/home']);
}
component.html:
<div class="col-3">
<button (click)="OnClickFunction()" class="btn btn-secondary btn-custom mr-3">Button Name</button>
</div>
Solution 7 - Angular
Try this:
constructor( public router: Router,) {
this.route.params.subscribe(params => this._onRouteGetParams(params));
}
this.router.navigate(['otherRoute']);
Solution 8 - Angular
You may have enough correct answers for your question but in case your IDE gives you the warning
> Promise returned from navigate is ignored
you may either ignore that warning or use this.router.navigate(['/your-path']).then()
.