CODEWITHSUNDEEP
angular
AKJ
AKJ

Reputation: 819

Angular 4 Routing unable to work

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.

Below are my codes:

<< product-details.component.ts >>:

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

}

My html looks like this:

<< product.details.component.html >>:
<div class='panel panel-primary' *ngIf='product'>
    <div class='panel-heading'>
        {{ pageTitle + ': ' + product.productName}}
    </div>
    <div class='panel-footer'>
        <a class='btn btn-default' (click)='onBack()' style='width:80px'>
            <i class='glyphicon glyphicon-chevron-left'></i> Back
        </a>
    </div>
</div>

Here is how my module file look like:

<< app.module.ts >>:
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 { }

my onBack method does not seem to be linked with the html. I am not sure what i am doing wrong or simply missing.

Upvotes: 0

Views: 60

Answers (1)

Michael Paddock
Michael Paddock

Reputation: 260

You're missing parentheses in your onBack method:

    onBack(): void {
        this._router.navigate(['/products']);
    }

Upvotes: 1

Related Questions