CODEWITHSUNDEEP
angular
Stan Hurks
Stan Hurks

Reputation: 1952

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.

Upvotes: 133

Views: 226716

Answers (8)

nick
nick

Reputation: 475

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>

Upvotes: 3

Boulboulouboule
Boulboulouboule

Reputation: 4207

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

Upvotes: 313

Reza Saadati
Reza Saadati

Reputation: 5419

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().

Upvotes: 1

Dheeraj Kumar
Dheeraj Kumar

Reputation: 4175

This should work

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

   YourFunction() {
      this.router.navigate(['/path']);
   }

}

Upvotes: 3

Sajib Khan
Sajib Khan

Reputation: 24156

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

Upvotes: 3

Krishnamoorthy Acharya
Krishnamoorthy Acharya

Reputation: 4254

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

Upvotes: 11

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

Try this:

constructor(  public router: Router,) {
  this.route.params.subscribe(params => this._onRouteGetParams(params));
}
this.router.navigate(['otherRoute']);

Upvotes: 1

Metehan Senol
Metehan Senol

Reputation: 669

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

Upvotes: 10

Related Questions