Выделите элемент метки после установки флажка

Question

Я пытаюсь отобразить карточки, так как тип ввода - флажок, при выборе карточек я могу получить подробную информацию о том, какие карточки выбраны пользователем, и мое требование заключается в том, что я должен выделить карточку, выбранную пользователь.

например, мне нужно выделить карту, чей флажок отмечен, и если флажок снят, мне нужно показать как карту.

lable+input[type=checkbox]:checked {
  //some css code
}

<form [fromGropu]="form1">

  <label for="{{i}}" *ngFor="let item of items" ;let i=index ">
    <input type="checkbox " id="{{i}} " [value]="item " (change)="onchange() "/>
    
    <div class="card rounded-0 ">
    <div class="card-header ">{{item.header}}</div>
    <diva class="card-body>{{item.desc}}</div>
    <div class="card-footer">{{item.footer}}</div>
    </div>
    </div>
    </label
    </form>

но выше CSS не работает, может кто-нибудь помочь в этом

Answer 1

---

Почему бы просто не выделить класс, который переключается с помощью ngClass?пожалуйста, попробуйте это изменение.

<form>
    <label for="{{i}}" *ngFor="let item of items;let i =index" (click)="item.active = !item.active;"
  [ngClass]="item.active ? 'active' : ''" style="display:block;">
    <div class="card rounded-0">
      <div class="card-header">{{item.header}}</div>
      <div class="card-body">{{item.desc}}</div>
      <div class="card-footer">{{item.footer}}</div>
    </div>
  </label>
</form>

Примечание: пожалуйста, удалите это свойство active для используемого массива, если вы отправляете данные в любой API.Ниже приведен рабочий пример!

Демонстрация стека Blitz

Answer 2

После проверки ввода карта div.card после ввода должна применять CSS.

Ваш CSS должен быть таким

input[type=checkbox]:checked + div.card{
color: red;
}

Демо https://stackblitz.com/edit/angular-checked-input?file=src/app/app.component.css