In my specific context, this is the HTML code I have:
<div class='table'>
<div>
<div *ngFor='let product of this.market[selectedTab].products | orderBy:"id"' class='itemlist' [ngClass]="{'active': isAdded}">
<div class='child'>
<div class='first'>
<div>
<h2>{{product.name}}</h2>
<ul class='subtitle' *ngIf='this.selectedTab === 0'>
<li class='itemsdesc' *ngFor='let item of product.items'>
<div>
<p>{{item.name}}</p>
<p>{{item.description}}</p>
</div>
</li>
</ul>
<p [innerHTML]='product.description' class='box-desc' *ngIf='product && product.description'></p>
</div>
</div>
</div>
<div class='child'>
<div class='fourth'>
<ul class='p-0 m-0'>
<li *ngFor='let item of product.items' class='def-number-input number-input d-flex justify-content-center'>
<a (click)='minus(item)' class='minus'[ngClass]="{'disable': isMinor}">-</a>
<input class='quantity' type='number' placeholder='0' [(ngModel)]='item.quantity'>
<a (click)='plus(item)' class='plus'>+</a>
</li>
</ul>
</div>
</div>
<div class='child'>
<div class='fifth'>
<ul class='p-0 m-0'>
<li *ngFor='let item of product.items; let i = index''>
<button class='cart' [ngClass]="{'disable': isUndefined(item.quantity) || item.quantity === 0}" (click)='this.updateCart(item); this.getTotalItems()'><i class='icon-addcart'></i></button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
According to my interactions, when I click on the button with the 'cart' class, I change the color of the button itself and I want to add a border to the div with the 'itemlist' class, so I activate an ngClass named 'active'. The issue arises when the border gets activated for all the 'itemlist' items on the screen instead of just the one that meets the condition in the button with the 'cart' class.
As you can see from my HTML, I tried to modify it using a class variable 'isAdded', but it affects all the 'itemlist' elements. I also attempted to change the condition of the [ngClass] based on the item.quantity, but at that point, it returns the value as undefined.
So, the question here would be whether there is a way to detect changes in the item quantity at the level of the parent component with the 'itemlist' class in order to modify its class?
Thank you in advance for your assistance