title: Angular 4 Routing unable to work
body: <p>I have been following Deborah Kurata's basic Angular course on pluralsight, and currently am at the module where she talks about routing and navigation. Somehow, i am unable to get the 'Back' button to work. </p>
  
  <p>Below are my codes:</p>
  
  <pre><code>&lt;&lt; product-details.component.ts &gt;&gt;:
  
  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  
  import { IProduct } from './product';
  
  @Component({
      templateUrl: './product-detail.component.html',
      styleUrls: ['./product-detail.component.css']
  })
  export class ProductDetailComponent implements OnInit {
      pageTitle: string = 'Product Detail';
      product: IProduct;
  
      constructor(private _route: ActivatedRoute,
                  private _router: Router) { }
  
      ngOnInit() {
          let id = +this._route.snapshot.paramMap.get('id');
          this.pageTitle += `: ${id}`;
  
          // Hard coded portion:
          this.product = {
              "productId": id,
              "productName": "Video Game Controller",
              "productCode": "GMG-0042",
              "releaseDate": "October 15, 2015",
              "description": "Standard two-button video game controller",
              "price": 35.95,
              "starRating": 4.6,
              "imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
          }
      }
  
      onBack(): void {
          this._router.navigate['/products'];
      }
  
  }
  </code></pre>
  
  <p>My html looks like this:</p>
  
  <pre><code>&lt;&lt; product.details.component.html &gt;&gt;:
  &lt;div class='panel panel-primary' *ngIf='product'&gt;
      &lt;div class='panel-heading'&gt;
          {{ pageTitle + ': ' + product.productName}}
      &lt;/div&gt;
      &lt;div class='panel-footer'&gt;
          &lt;a class='btn btn-default' (click)='onBack()' style='width:80px'&gt;
              &lt;i class='glyphicon glyphicon-chevron-left'&gt;&lt;/i&gt; Back
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is how my module file look like:</p>
  
  <pre><code>&lt;&lt; app.module.ts &gt;&gt;:
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  
  import { AppComponent } from './app.component';
  import { ProductListComponent } from './products/product-list.component';
  import { ConvertToSpacesPipe } from './shared/covert-to-spaces.pipe';
  import { StarComponent } from './shared/star.component';
  import { ProductDetailComponent } from './products/product-detail.component';
  import { WelcomeComponent } from './home/welcome.component';
  import { RouterModule } from '@angular/router';
  
  @NgModule({
    declarations: [
      AppComponent,
      ProductListComponent,
      ConvertToSpacesPipe,
      StarComponent,
      ProductDetailComponent,
      WelcomeComponent,
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      RouterModule.forRoot([
        { path: 'products', component: ProductListComponent },
        { path: 'products/:id', component: ProductDetailComponent },
        { path: 'welcome', component: WelcomeComponent },
        { path: '', component: WelcomeComponent },
        { path: '**', redirectTo: 'welcome', pathMatch: 'full'},
      ]),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>my onBack method does not seem to be linked with the html. I am not sure what i am doing wrong or simply missing. </p>