Use of Ng-Click and Hidden with Angular 7

Question

In my project I have a card to which when I click it appears the information of that user, my purpose is that when clicking it opens only of the user I clicked, but nevertheless, it ends up opening all the users, as in the image below

I wonder if there is a way with the click I just open where I clicked, I did some research, but only found a method of Angularjs, which does not apply in Angular 7. Also follow my HTML and TS to analyze

 getTable(){
    this.graphicsService.getTabela().subscribe(res => {
      this.table = res;
      console.table(this.table)
    });
  }

<div class="content-card" *ngFor="let item of table">
        <div class="client" (click)="teste = !teste">
          <span>{{ item.IdUser }} &nbsp; {{ item.NameUser }} &nbsp; {{ item.ClientAnswered }}</span>
        </div>
        <div class="client-info" [hidden]="!teste">
          <span>{{ item.DateMessage }}</span>
        </div>
      </div>

Thanks in advance.

Answer 1

It seems to me that you are using the same variable to control the open/closed state of all items in the list. Using the idea of the @user3453562 response, you can create an array of boolean the same size as your variable table, thus:

state = [];

getTable()
{
    this.graphicsService.getTabela().subscribe(res =>
    {
        this.table = res;
        this.state.fill(false, this.table.length);
    });
}

And in his .html:

<div class="content-card" *ngFor="let item of table; let i = index">
    <div class="client" (click)="state[i] = !state[i]">
        <span>{{ item.IdUser }} &nbsp; {{ item.NameUser }} &nbsp; {{ item.ClientAnswered }}</span>
    </div>
    <div class="client-info" [hidden]="state[i]">
        <span>{{ item.DateMessage }}</span>
    </div>
</div>

A gif for better understanding:

Answer 2

Hello!

In these situations I use this way:

*ngFor="let test of tests; index as i"

Thus, I identify each item by index, when creating html.

<div>
   <div>{{ test.nome }}</div>
   <div><button (click)="openOption(i)">Edit</button></div>
</div>