Как сделать анимацию и показать информацию на конкретной карточке из *ngFor?

Question

[Darkness]

У меня есть 12 карточек, все информация из массива, так как они очень похоже. Но нужно сделать так, чтобы при нажатие, например, текст менялся на нужный мне карточке.
Т.е. пример, есть 12 карточек, нажимаешь на первую id:1, именно у первой карточки, например, заменяется текст.
Не доганяю, буду благодарен вам!

Массив в component.ts

public docslArray: any[] = [
    {"id": 0, "title": 'Покупка недвижимости за наличный расчет', "description": 'Работаешь официально? Купил или построил жилье? Получи налоговый вычет!', "bonusDescription" : "*Максимальный размер вычета- 260 000 рублей."},
    {"id": 1, "title": 'Приобретение жилья в ипотеку', "description": 'Работаешь официально? Купил или построил жилье? Получи налоговый вычет!', "bonusDescription" : "*Максимальный размер вычета- 260 000 рублей."},
    {"id": 2, "title": 'Приобретение жилья по социальной ипотеке', "description": 'Работаешь официально? Купил или построил жилье? Получи налоговый вычет!', "bonusDescription" : "*Максимальный размер вычета- 260 000 рублей."},

HTML

<div *ngFor="let item of docslArray; let i = index">
			<div class='docs3ndflCard'>
				<div class='containerTitle'>
					<h2 class="__titleCard">{{item.title}}</h2>
				</div>
				<div class="containerMoreInfoCard">
					<p class="__mainInfoCard">{{item.description}}</p>
					<b>{{item.bonusDescription}}</b>
				</div>
			</div>
		</div>

Чтобы понимали, о каких карточках идет речь:

Answer 1

[Urukhayy]

<div *ngFor="let item of docslArray; let i = index">
      <div class='docs3ndflCard' (click)="changeTitle(item)">
        <div class='containerTitle'>
          <h2 class="__titleCard">{{item.title}}</h2>
        </div>
        <div class="containerMoreInfoCard">
          <p class="__mainInfoCard">{{item.description}}</p>
          <b>{{item.bonusDescription}}</b>
        </div>
      </div>
</div>

.ts

changeTitle(item) {
    item.title = 'TEST'
}