Добавить границу в div, на который нажали

Question

У меня есть объект для хранения информации. Чтобы представить эти данные, я использовал * ngFor, который создает строку для каждого экземпляра.

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

Как я могу это сделать?

Демо

. html

<div *ngFor="let item of objects; let i = index" style="width: 100%;">
    <div class="d-flex flex-row divs">
        <div>
            <span>{{item.id}}</span>
        </div>
        <div>
            <div>
                <span>{{item.name}}</span>
            </div>
        </div>
        <div style="margin-left:auto">
            <button>click</button>
        </div>
    </div>
</div>

Answer 1

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

, например:

<div class="d-flex flex-row divs" 
    [ngClass]="{'active' : (selectedItem.id === item.id)}"> <div>
  ...

</div> 

Затем при нажатии кнопки вы Вы можете передать элемент, на который нажали:

<div style="margin-left:auto">
            <button (click)="setItem(item)">click</button>
        </div>

В component.ts файле вы можете установить выбранный элемент следующим образом:

public selectedItem :any = {};

setItem(item){
  this.selectedItem = item
}

Теперь в css вы можете иметь .active класс css как показано ниже:

.active{
  border : 1px solid red;
}

Вот рабочий пример: demo .