ngOnChanges not getting called

Published

I was making a small project in which we have two components menu and bill
I want that if I change the quantity of any menu item then onChanges of the bill should be called
and whole items array must be passed for the further computation but don’t know how to achieve that

Currently my code is working fine for the change in 1st menu item

the code for my menu.component.html is

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <div class="row">
                <div class="col-lg-6" *ngFor="let item of items">
                    <div class="card my-5" style="width: 18rem;height: 25rem;">
                        <img [src]= "item.picture" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h2 class="card-title">{{item.Title}}</h2>
                            <p class="card-text">{{item.description}}</p>
                            <h5>price : {{item.price}}/-</h5>
                            <button class="btn-primary"(click) = "qtydec(item)" >-</button>
                            &nbsp; <span><b>{{item.qty}}</b></span>
                            &nbsp;<button class="btn-primary" (click) = "qtyinc(item)">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <app-bill [qty] = "items[0].qty"></app-bill>
        </div>
    </div>
</div>

the code for my menu.component.ts

import { menuItem } from './../menuItem';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  items : menuItem[];

  constructor() {
       this.items = [
           {
             Title : "Dal Makhni",
              picture : "../../assets/dalMakhni.jpg",
              description : 'Dal Makhani is one of the most popular n lentil recipes from the North Indian Punjabi cuisine',
              qty : 0,
              price :250
           },
           
           {
            Title : "Sahi Paneer",
            picture : "../../assets/sahipaneer.jpg",
            description : 'Shahi Paneer is a delicious North Indian curry made with Paneer n and tomato based spicy gravy ',
            qty : 0,
            price :350
           },
             
           {
            Title : "Momos",
            picture : "../../assets/momos.jpg",
            description : 'Momos are a popular street food in northern parts of India.nThese are also known as Dim Sum',
            qty : 0,
            price :80
           },
           {
            Title : "Chicken Biryani",
            picture : "../../assets/chickenbiryani.jpg",
            description : 'Chicken Biryani is a savory chicken and rice dish that n includes layers of chicken, rice, and aromatics that are steamed together. ',
            qty : 0,
            price :180
           }
       
       ]
   }

  ngOnInit(): void 
  {
    
  }
   
   qtyinc(item:menuItem){
     item.qty++;
    
   }

   qtydec(item:menuItem){
     item.qty--; 
   
   }


}

the code for my menuItem interface is

export interface menuItem{
    Title : string;
    picture : string;
    description : string;
    qty : number;
    price : number;
}

I just want to call the billing component and change the total bill as soon as the user changes
quantity of any item in subarray so I want to pass the whole items array and as soon as the change happens in quantity so that i can compute the new bill

Thanks in advance

Source: AngularJS Questions

Published
Categorized as angular, angularjs, bootstrap-4, c++17, html Tagged , , , ,

Answers

Angular won’t know that the change has taken place, as it is pointing to the reference of items. That’s still the same object in memory, so ngOnChanges won’t detect this change.

You could perhaps look into using ngDoCheck and checking yourself whether the array has changed. The docs have an example of this.

Alternatively, you could return a new array when the decrement/increment operation has been performed so Angular’s change detection picks it up. Something like this perhaps:

qtyinc(item: Item) {
   this.items = this.items.map(it => it.Title === item.Title ? {...it, qty: ++it.qty} : it )
}

Maximilian Dibbert

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq