title: How to open a new page inside component on button click in angular2?
body: <p>dashboard.component.ts file</p>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import {Router} from '@angular/router';
  import {Http, Headers, Response,RequestOptions} from '@angular/http';
  import { Component } from '@angular/core';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  import {Observable} from 'rxjs/Rx';
  
  import { Login }    from './login';
  
  @Component({
    moduleId: module.id,
    selector: 'dashboard',
    templateUrl: './dashboard.html',
    template : '&lt;router-outlet&gt;&lt;/router-outlet&gt;'
  })
  
  export class DashboardComponent {
  
  }
  </code></pre>
  
  <p>module.ts file in which I have defined routes</p>
  
  <pre class="lang-ts prettyprint-override"><code> import { NgModule }             from '@angular/core';
  import { BrowserModule }        from '@angular/platform-browser';
  import { FormsModule }          from '@angular/forms';
  import {Router} from '@angular/router';
  import { HttpModule, JsonpModule } from '@angular/http';
  import { RouterModule, Routes } from '@angular/router';
  import { AppComponent }          from './app.component';
  import { LoginFormComponent } from './login-form.component';
  import { DashboardComponent } from './dashboard.component';
  const appRoutes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
  ];
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      JsonpModule,
      RouterModule.forRoot(appRoutes)
    ],
    declarations: [
      AppComponent,
    LoginFormComponent,
    DashboardComponent
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  
  
  <p>I am new to angular2, and I am designing a login page. Now I want to open a new page when user is properly authenticated after clicking on submit button . Please suggest me some alternatives of how should I do this? Below is the login.component.ts file . Thanks
  Updated code </p>
  
  <pre class="lang-ts prettyprint-override"><code>    import { Injectable } from '@angular/core';
      import {Router} from '@angular/router';
      import {Http, Headers, Response,RequestOptions} from '@angular/http';
      import { Component } from '@angular/core';
      import 'rxjs/add/operator/map';
      import 'rxjs/add/operator/catch';
      import {Observable} from 'rxjs/Rx';
      import { Login }    from './login';
      @Component({
        moduleId: module.id,
        selector: 'login-form',
        templateUrl: './login-form.component.html',
      })
  
      export class LoginFormComponent {
           constructor (private http: Http,private _router:Router) {}
          data = {
              'email': '',
                 'password': ''
          };
          formSubmit (body: Object): Observable&lt;Login[]&gt;{
             let bodyString = JSON.stringify(body);
              let headers      = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); // ... Set content type to JSON
              let options       = new RequestOptions({ headers: headers }); 
             var params = "username=" + this.data.email + "&amp;password=" + this.data.password;
             var resp = this.http.post("http://localhost:8000/login", params, options) // ...using post request
                               .subscribe((res:Response) =&gt; {
                                   if(res.json().status_code == 200)
                                   {
                                                            this._router.navigate(["../dashboard"]);
                                       console.log("success");
                                   }
                                   } );
                               return;                                          
      }
      }
  </code></pre>