Angular : Manual redirect to route

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.

Solution 1:

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:

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:

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

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>