I'm currently facing a complex issue with my Product Detail page. The page is designed to display product information, allow users to increment and decrement the quantity of a product, but when I click on the icons for increasing or decreasing the quantity, instead of showing the actual quantity it displays "NaN". There are no errors in my code editor, so I'm struggling to figure out what's causing this issue. I've been working on this problem all day and would greatly appreciate any help in pinpointing where I've gone wrong. Thank you in advance.
Product-Details.Component.ts
import { Component, OnInit } from '@angular/core';
import { IProduct } from 'src/app/shared/models/product';
import { ShopService } from '../shop.service';
import { ActivatedRoute } from '@angular/router';
import { BreadcrumbService } from 'xng-breadcrumb';
import { BasketService } from 'src/app/basket/basket.service';
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
styleUrls: ['./product-details.component.scss']
})
export class ProductDetailsComponent implements OnInit {
product: IProduct;
quantity: 1;
constructor(private shopService: ShopService, private activateRoute: ActivatedRoute,
private bcService: BreadcrumbService, private basketService:BasketService) {
this.bcService.set('@productDetails', '');
}
ngOnInit(): void {
this.loadProduct();
}
addItemToBasket() {
this.basketService.addItemToBasket(this.product, this.quantity);
}
incrementQuantity() {
this.quantity++;
}
decrementQuantity() {
if(this.quantity > 1) {
this.quantity--;
}
}
loadProduct() {
this.shopService.getProduct(+this.activateRoute.snapshot.paramMap.get('id')!).subscribe(product => {
this.product = product;
this.bcService.set('@productDetails', product.name)
}, error => {
console.log(error);
});
}
}
Product-Details.Component.html
<div class="container mt-5">
<div class="row" *ngIf="product">
<div class="col-6">
<img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid w-100">
</div>
<div class="col-6">
<h3>{{product.name}}</h3>
<p style="font-size: 2em;">{{product.price | currency}}</p>
<div class="d-flex justify-content-start align-items-center">
<i (click)="decrementQuantity()" class="fa fa-minus-circle text-warning mr-2" style="cursor: pointer; font-size: 2em;"></i>
<span class="font-weight-bold" style="font-size: 1.5em;">{{quantity}}</span>
<i (click)="incrementQuantity()" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em;"></i>
<button (click)="addItemToBasket()" class="btn btn-outline-primary btn-lg ml-4">Add to Cart</button>
</div>
</div>
<div class="row mt-5">
<div class="col-12 ml-3">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
</div>
</div>
</div>