Is there a way to apply a css to a parent element depending on the child's status?

Question

I put in specific context, this is my html

<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>

segun mi iteraccion cuando pulso el boton con clase 'cart' cambio el color del propio boton y deseo ponerle un borde al div con clase 'itemlist', para lo que activo un ngClass con nombre 'active'. El problema esta en que el borde se me activa para todos los itemlist de la pantalla , cuando lo que quiero es que solo se active aquel item list que cumple la condicion del ngClass en el boton con clase 'cart'.

As you can see in my html I have tried to modify it with a class variable 'isAdded' but it modifies all the 'itemlist' and I have tried to change the condition of the [ngClass] according to the item.quantity but at that point it returns the value as undefined

That is, the question would be, is there a way to detect that the item.quantity varies at the level of the parent component with class 'itemlist' to modify its class?

Thank you in advance for your help

Answer 1

I have solved it by adding the property 'isAdded: false' in the original data load and then I have implemented a method in which I look for if the id of the item has been selected and I set the class to true

  someItemAdded(argproduct) {
    const products = this.market[this.selectedTab].products;
    const product = products.find(p => p.id === argproduct.id);
    const isAdded = product.items.some((i: any) => i.isAdded);
    return isAdded;
  }