on click of next and previous button component view and title id should change

Question

I am making product details page in Angular i am getting wrong result on header title its coming on array while clicked on next or previous button my working is:

Product-details.component.ts import { Component, OnInit } from '@angular/core'; import { IProduct } from './products'; import { ActivatedRoute, Router, Params } from '@angular/router';

 @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.route.params.subscribe((params : Params)=>{ let id = parseInt(params ['id']); this.pageTitle += `: ${id}`; this.product = { "productId": id, "productName": "Leaf Rake", "productCode": "GDN-0011", "releaseDate": "March 19, 2016", "description": "Leaf rake with 48-inch wooden handle.", "price": 19.95, "starRating": 3.2, "imageUrl": "assets/images/cutter.jpg" } }) } onBack(): void { this.router.navigate(['/products']); } goPrevious(){ let previousId = this.product.productId - 1; this.router.navigate(['/products', previousId]); } goNext(){ let nextId = this.product.productId + 1; this.router.navigate(['/products', nextId]); } } Product-details.component.html <div class="card" *ngIf='product'> <div class="card-header"> {{pageTitle + ': ' + product.productName}} </div> <div class='card-body'> <div class='row'> <div class='col-md-8'> <div class='row'> <div class='col-md-4'>Name:</div> <div class='col-md-8'>{{product.productName}}</div> </div> <div class='row'> <div class='col-md-4'>Code:</div> <div class='col-md-8'>{{product.productCode | lowercase | convertToSpaces: '-'}}</div> </div> <div class='row'> <div class='col-md-4'>Description:</div> <div class='col-md-8'>{{product.description}}</div> </div> <div class='row'> <div class='col-md-4'>Availability:</div> <div class='col-md-8'>{{product.releaseDate}}</div> </div> <div class='row'> <div class='col-md-4'>Price:</div> <div class='col-md-8'>{{product.price|currency:'USD':'symbol'}}</div> </div> <div class='row'> <div class='col-md-4'>5 Star Rating:</div> <div class='col-md-8'> <pm-star [rating]='product.starRating'> </pm-star> </div> </div> </div> <div class='col-md-4'> <img class='center-block img-responsive' [style.width.px]='200' [style.margin.px]='2' [src]='product.imageUrl' [title]='product.productName'> </div> </div> </div> <div class='card-footer'> <button class='btn btn-outline-secondary' (click)='onBack()' style='width:80px'> <i class='fa fa-chevron-left'></i> Back </button> <div class="pull-right"> <button class='btn btn-danger' (click)='goPrevious()' style='width:80px'> Previous </button> <button class='btn btn-primary' (click)='goNext()' style='width:80px'> Next </button> </div> </div> </div> 

please tell me where i am doing wrong..

Answer 1

From what I have understood I hope this the result you are expecting and this answer helps.

//Remove the 'Product details here'
pageTitle: string = '';


ngOnInit() {
  // let id = +this.route.snapshot.paramMap.get('id');
  this.route.params.subscribe((params : Params)=>{
    let id = parseInt(params ['id']);

    //and change the page title like this
    this.pageTitle = `Product details: ${id}`;

    this.product = {
      "productId": id,
      "productName": "Leaf Rake",
      "productCode": "GDN-0011",
      "releaseDate": "March 19, 2016",
      "description": "Leaf rake with 48-inch wooden handle.",
      "price": 19.95,
      "starRating": 3.2,
      "imageUrl": "assets/images/cutter.jpg"
    }
  })  
}

I hope this helps this is what you are expecting! If you need further clarifications let me know!