title: How to redirect to a new page in Angular 4 through button click?
body: <p>In <code>home.component.html</code> page I want the button to redirect the url to a new page when clicked.  </p>
  
  <p>I expect that when I clicked the button, the current url <code>http://localhost:24282/home</code>, will be redirected to this url <code>http://localhost:24282/master</code> and <code>master.component.html</code> page will be shown.</p>
  
  <p>The issue is that, though the url is redirected to <code>http://localhost:24282/master</code> when I clicked the button, but still I'm on the current page <code>home.component.html</code>.  I wasn't completely redirected to the master page <code>master.component.html</code></p>
  
  <p>Below are the implementation.</p>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>    import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './Components/home.component';
  import { MasterComponent } from './Components/master/master.component';
  import { PageNotFoundComponent } from "./Components/common/page-not-found.component";
  
  const appRoutes: Routes = [
      { path: 'home', component: HomeComponent },
      { path: 'master', component: MasterComponent },
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: '**', component: PageNotFoundComponent }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>    import { NgModule } from '@angular/core';
  import { APP_BASE_HREF } from '@angular/common';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  import { routing } from './app.routing';
  import { HomeComponent } from './Components/home.component';
  import { MasterComponent } from './Components/master/master.component';
  import { PageNotFoundComponent } from "./Components/common/page-not-found.component";
  
  @NgModule({
      imports: [BrowserModule, routing],
      declarations: [AppComponent, HomeComponent, MasterComponent, PageNotFoundComponent],
      providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
      bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>app.component.ts</strong> - where the newChange() method is defined</p>
  
  <pre><code>    import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
      selector: 'moc-landing',
      templateUrl: './app/Components/home.component.html',
      styleUrls: ['./app/Components/home.component.css']
  })
  export class AppComponent {
  constructor(private router: Router) {}
  
      newChange(): void {
          this.router.navigateByUrl('master');
      }
  }
  </code></pre>
  
  <p><strong>home.component.html</strong></p>
  
  <p><code>&lt;button id="new" class="btn btn-primary" (click)="newChange()"&gt;New Change Request&lt;/button&gt;</code></p>
  
  <p>I'm not sure if I have correctly used <code>router.navigateByUrl</code> or is there any alternative way?</p>
  
  <p>In ASP.NET MVC, this is fairly easy to do using razor's URL helper classes (e.g. <code>@Url.Action</code>).</p>
  
  <p>But in Angular 4 (which I'm pretty new to it), I don't know how to implement it. I have gone through some research, but couldn't find any related to this.</p>
  
  <p>Any help is greatly appreciated.</p>