title: Angular redirect to an empty page after the button is clicked
body: <p>I have a home  page with  one button , when the user click in the button  the user must be redirected to another page.
  I try to make it like this but nothing happen when i click the button:</p>
  <p>app.component.ts</p>
  <pre><code>
  import { Component } from '@angular/core';
  import {Router} from '@angular/router'
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'SaveWorld';
    constructor(private router:Router){}
  
   onClick(){
  this.router.navigateByUrl('/saveWorld');
     }
  }
  </code></pre>
  <p>Button code :</p>
  <pre><code>&lt;button  click)=&quot;onClick()&quot;type=&quot;button&quot; class=&quot;button&quot; &gt;Make a change&lt;/button&gt;
  </code></pre>
  <p>routes</p>
  <pre><code>import {NgModule} from  '@angular/core';
  import {Routes,RouterModule} from  '@angular/router';
  import {HomePageComponent} from  '../app/home-page/home-page.component'
  
  const routes:Routes=[
  
       {path:'HomePage',component:HomePageComponent},
      {path:'saveWorld',component:SaveWorldComponent},
      {path:'',redirectTo:'/HomePage',pathMatch:'full'}
  ];
  
  @NgModule({
      imports:[RouterModule.forChild(routes)],
      exports:[RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  <p>Can you please help me?</p>
  <p>Update:</p>
  <p>Now when  i click the button  works but not how i want to work,didn't redirect me to a new empty page.
  <a href="https://i.stack.imgur.com/QYSMw.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/QYSMw.jpg</a></p>