Tutorial: How to redirect in Angular2

In this tutorial I’m going to give you a very simple example of how to navigate between components on an Angular2 application, but before we begin there are some configurations we have to do.

We’re going to use 2 components in this example: Component1 and Component2, to be able to redirect and navigate from one to the other we’re going to use the RouterModule, and for that module to work we have to create a file called app.routing.ts:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
 
const appRoutes: Routes = [
  { path: 'component1', component: Component1 },
  { path: 'component2', component: Component2 }
];
 
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

This is the file where we can define the routes, it allows us to specify a path for each of our components, as you can see in the code I’ve defined the paths /component1 and /component2 which will allow me to redirect to both my components.

Next we have to import the routing configuration on the app.module.ts as follows:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { routing, appRoutingProviders }  from './app.routing';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
 
@NgModule({
  imports:      [ BrowserModule, routing ],
  declarations: [ AppComponent, Component1, Component2],
  providers:    [appRoutingProviders],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Perfect! We’re done with the configurations, now you can redirect by passing the path to the routerLink attribute of a regular link:

<a routerLink="/component1" >Component 1</a>
<a routerLink="/component2" >Component 2</a>

This will have the same effect as typing http://localhost:3000/component1 on the browser.

Recommended for you

Angular2 Error: Can’t bind to ‘ngModel’ since it isn’t a known property of &... Lots of people are having this problem since Angular2 introduced NgModule, this error occurs when you try to use something from an specific module without importing it, this is how the error looks on the console: zone.js:355 Unhandled Promise rejection: Template parse errors: Can't bind to 'ng...
Angular2 Tutorial: Detecting Clicks Outside the Component Angular2 click detection Sometimes there is a need to detect whether the user is clicking inside or outside our angular2 component, specially if your component has a dropdown element, in this case you need to know exactly where the click occurred in order to perform the right action. In this tut...
Angular2 error: Error in ./AppComponent class AppComponent_Host – inline template:0:0 caused b... If you're seeing this error when you run your application it's probably because you're trying to use http.get without importing the HttpModule. This is what the error looks like on the browser console: core.umd.js:5995 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline temp...
Angular2 Error: Cannot assign to a reference or variable! ; Zone: ; Task: Promise.then ... This error occurs when you try to define a template reference variable with the same name of an existing variable, like for example in this case: @Component({ selector: 'example', template: ` Name ` }) export class AppComponent { name; } As you can see, the...

One comment on “Tutorial: How to redirect in Angular2

  1. namita jain

    Hi,

    I want to redirect to another component if login credentials are correct else redirect to same page.

    import { Component } from '@angular/core';
    import { Hero }    from './hero';
    import { Routes, RouterModule,RouterConfig } from '@angular/router';
    import { HomeComponent } from 'app/home.component';
     
    @RouterConfig([
      { path: '/home',  component: HomeComponent,  name: 'home' }
      ])
     
    @Component({
      selector: 'login-form',
      templateUrl: 'app/login-form.component.html'
      providers: [ROUTER_PROVIDERS]
    })
     
     
    export class AppComponent {
    active = true;
    model = new Hero('', '');
      checkValid(model){
        var userid = localStorage.getItem('name');
        var password = localStorage.getItem('password');
        if((userid == model.name1) &amp;&amp; (password == model.password1)) {
            alert("Welcome User");
           this.router.navigate(['/home']);
     
        }
        else {
     
            model.name1 = '';
            model.password1 = '';
            alert("You are not valid User");
          }
      } }

    This is my code, its not working properly

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>