How to apply a single style to the selected element within an *ngFor?

Question

within my angular application, I'm going through the following array of objects to display my elements on the screen

[{
  "name": "Equipment",
  "functional_id": "furniture",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "White bags",
      "description": "Reusable",
      "id": 11,
      "path": "",
      "items": [
        {
          "name": "Small model",
          "description": "25",
          "price": 0,
          "functional_id": "white_bags_small_model_by_25"
        },
        {
          "name": "Medium model",
          "description": "20",
          "price": 0,
          "functional_id": "white_bags_medium_model_by_20"
        },
        {
          "name": "Large model",
          "description": "10",
          "price": 0,
          "functional_id": "white_bags_large_model_by_10"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Burgundy bags",
      "description": "Reusable",
      "id": 12,
      "path": "",
      "items": [
        {
          "name": "Small model",
          "description": "25",
          "price": 0,
          "functional_id": "bags_burgundy_bags_small_model_by_10"
        },
        {
          "name": "Large model",
          "description": "Par 10",
          "price": 0,
          "functional_id": "bags_burgundy_bags_large_model_by_10"
        }
      ]
    }    
  ],
  "sorting": 2300"
},
{
  "name": "Documents",
  "functional_id": "docs",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "Book of conventions",
      "id": 17,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "agreement_book"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Procedure posters",
      "description": "Procedure",
      "id": 18,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "posters_procedure_of_taking_in_charge"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Services Brochures",
      "description": "Brochures",
      "id": 19,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "services_brochures"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Catalogue",
      "id": 20,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "catalogue"
        }
      ]
    }
  ],
  "sorting": 2400
},
{
  "name": "Products",
  "functional_id": "prods",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "Articles",
      "id": 19,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_1"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Procedure_b",
      "description": "Procedure",
      "id": 24,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_charge"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Book Services",
      "description": "Book Services",
      "id": 26,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_services"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Catalogue",
      "id": 32,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "catalogue"
        }
      ]
    }
  ],
  "sorting": 4400
}
]

I get to the next point where I paint the following button for each type of product and I want to apply a class to only the one selected. I set the following in my html:

            <div class='child'>
              <div>
                <ul class='p-0 m-0'> 
                  <li *ngFor='let item of product.items; let i = index'>                
                    <button class='cart' [ngClass]="{'in-row': i === product.items.length - 1}" (click)='this.updateCart()'><i class='icon-addcart'></i></button>
                  </li>
                </ul>
              </div>
            </div>

according to this code the class 'in-row' is being applied to all buttons, when it should only be applied to the selected ones

I'm kind of new at using an angle and I don't really understand what I'm doing wrong. Someone who can give me an idea of what I'm doing wrong? Thank you in advance.

Answer 1

You need to applay css to the product with a current id:
https://stackblitz.com/edit/stackoverflow-active-product-button

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',,
      styles: ['.in-row {    background: red;  }   ']
    })

    export class AppComponent {
      title = 'final';

      products = [
        { id: 1, name: 'product1' },
        { id: 2, name: 'product2' },
        { id: 3, name: 'product3' },
      ]

      selectedItem: any;
      updateCart(id: number) {
        this.selectedItem = id;
      }
    }

<li *ngFor='let item of products; let i = index'>
  <button class='cart' [ngClass]="{'in-row': selectedItem == item.id}" (click)='updateCart(item.id)'><i
          class='icon-addcart'></i>button {{ i }}</button>
</li>