Product detail is displaying NaN instead of Quantity Number

Question

I am dealing with a problem here at least rather complex for me. I have a Product Detail page which is supposed to show product amount, detail, increment and decrement of product quantity. The problem am facing is that when I click on the increment or decrement icon, it's not displaying the product quantity instead its displaying "NaN" instead of the product quantity and there is no error in my code editor. I would be grateful if someone can pinpoint me to my mistake and have been on this all day. Thanks 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>

Specify `quantity` type as number. For example **`quantity: number = 1;`**, or **`quantity = 1;`** instead of `quantity: 1;`. — Yong Shun, Sep 29 '21 at 11:06
Does this answer your question? [How do you check that a number is NaN in JavaScript?](https://stackoverflow.com/questions/2652319/how-do-you-check-that-a-number-is-nan-in-javascript) — 9ilsdx 9rvj 0lo, Sep 29 '21 at 11:07

score 1 · Answer 1 · answered Sep 29 '21 at 11:22

According to TypeScript - Variables,

The type syntax for declaring a variable in TypeScript is to include a colon (:) after the variable name, followed by its type.

If you use a colon (:) after the variable, you must specify the type.

quantity: number = 1;

OR

Directly assign the numeric value to the variable. The variable will be treated as a number type.

quantity = 1;

Product detail is displaying NaN instead of Quantity Number

1 Answers1