Как добавить / удалить css класс в родительском / дочернем элементе [divs] в angular 8

Question

Я работаю над функцией отправки денег в банковском приложении. При этом клиент должен выбрать получателя из списка получателей, и выбранный получатель должен быть выделен в соответствии с требованием. Допустим, есть 3 вложенных элемента div, которые содержат информацию о каждом получателе.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я выбираю (щелкаю) элемент div получателя, я не могу выделить его,

Как нам это сделать angular 8?

<div class="parent">
<div 
class="cards-col col-lg-6 col-md-6 col-sm-6" class="recipient-div"
*ngFor="let recipient of recipientsList"
(click)="selectedRecipient($event)">
    <form id="recipient-form-sendmoney-dummy" method="post">
        <div class="favourite-recipient" onclick="markFavoriteBene(this)" data-beneno="3"></div>
        <div class="recipient-card" onclick="viewRecipient(this)">
            <div class="recipient__avatar"><img class="profile-pic recipient__avatar" src="assets/img/user-img.jpg"></div>
            <h4 class="recipient__name spacer-8 recipient-beneview-content">{{recipient.name}} ({{recipient.name}})</h4>
        </div>
    </form>
</div>

select-receient.component.ts Этот класс включает в себя некоторые базовые c angular импорт и заметку много

selectedRecipient(e){
}

Что мне добавить в эту функцию, чтобы я мог выделить [добавить * класс css для цвета] выбранного получателя из многих?

Или любое другое решение для этой проблемы?

Answer 1

Использование NgClass:

Добавляет и удаляет CSS классы для элемента HTML.

Шаблон компонента имеет слушатель события щелчка, который выполнит toggleSelection(). На этом же элементе находится [ngClass], который добавляет класс highlight только тогда, когда значение selected равно true.

your.component. html

<div
  (click)="toggleHighlight()"
  [ngClass]="{ 'highlight': selected }">
  Click to toggle class
</div>

Класс компонентов - это место, где ваша логика c для установки значения selected выполняется внутри метода toggleSelection().

your.component.ts

...

selected: boolean;

toggleSelection() {
  this.selected = !this.selected;
}

...

Вот рабочий stackblitz , демонстрирующий концепцию.

Answer 2

Если вы хотите выделить выбранное или нажать div, то вы можете использовать индекс, чтобы определить, какой элемент щелкнул.

HTML Изменение:

[ngClass]="i == selectedIndex ? 'selected' : ''" // for div element which you want to apply styles

Изменение TS:

selectedIndex : number;

selectedRecipient(data) {
  this.selectedIndex = data;
}

РЕДАКТИРОВАТЬ:

Вот документация о доступных экспортируемых значениях:

                                    using this
                                     \/\/\/\/
*ngFor="let recipient of folders; let i = index"

Working_Demo