Onclick of next and previous button my component content should change with router Id and header Id

Question

I am making a component "product-detail.component.html" with "Previous" and "Next" button on click on these buttons my view should change dynamically with router link and header ID, my component "product-detail.component.ts"
please help me where I am doing wrong, your early reply appreciated..

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

product-detail.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() {   
     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]);   }

}

On console I am not getting any error, on click of next or previous button product details are not changing, and on header product ID is not coming. — user2147423
You only have one product hard-coded into the code, so you won't see any different products. Moving next/previous by adding/subtracting to a numeric Id may not always work because most keys won't be sequential (if there are any deletions or if the data is sorted). But working within the given constraints, I was able to work. See my answer below. — DeborahK

DeborahK DeborahK · Accepted Answer · 2019-08-07T17:22:20

I just tried your code and it works fine.

I changed one line in the component:

this.pageTitle = `Product Detail: ${id}`;

You can't just concatenate the title because this code is repeated each time you click a button.

You won't get the product to change because your ngOnInit has the product hard-coded. The only thing that will change is the title:

Onclick of next and previous button my component content should change with router Id and header Id

1 Answers