routing navigate method not redirecting to targeted component

Question

I have an issue with using routing navigate method of angular. I have two components : LoginComponent and HomeComponent. When I click on the button in "login.component.html", I want to be redirected to "home.component.html".

• app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    {path: 'home', component: HomeComponent}
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule, RouterModule.forRoot(routes)
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• login.component.html

 <button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

• home.component.html

<p>
  home works!
</p>

The URL changes but it remain in the same component page.

• login.component.ts

  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor(private router:Router) { }
  
    ngOnInit() {
    }
  
     goHome() {
      this.router.navigate(['home']);
    }
  }
  

Answer 1

Make these additions:

<button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

    goHome() {
    this.router.navigate(['home']);
  }

or via <a>.

<a [routerLink]="['/home']">home</a>

If necessary, remove / if you intend to be appended to the current route instead.