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

What is the value of wrong results for the header title? What are you expecting? — Mark Stewart

Thivagar Thivagar · Accepted Answer · 2019-08-01T15:39:28

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!

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

1 Answers