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**

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

* **home.component.html**

```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']);
>   }
> }
> 
> ```
> 
>