typescript - Angular card content extends without pressing

Question

I've created in angular a mat-card with some presentation data. On button click, the data from mat-card-content extends. For more clarification look at the following pictures:

- not extended

- extended

The code for that is this:

<mat-card class="my-2 card-container">
  <mat-card-header>
    <mat-card-title class="m-0"><i class="material-icons mr-2">&#xE87C;</i> {{person.name}} </mat-card-title>
    <mat-card-actions class="m-0 p-0 ml-auto">
      <button mat-mini-fab color="primary" (click)="toggleShowDetails(person)">
        <mat-icon>{{!person.details ? 'unfold_more' : 'unfold_less'}}</mat-icon>
      </button>
    </mat-card-actions>
  </mat-card-header>

    <mat-card-content [hidden]="!person.details" [id]="person.id">
      more-info {{person.id}}
    </mat-card-content>
</mat-card>

  toggleShowDetails(person: Person) {
    person.details = !person.details; <!-- (it's a boolean) -->
  }

The problem I have is that when I have multiple cards on the same row and I extended just one, all the cards on that row extends too. No data is shown on them and the hidden tag doesn't modify. It's just the card. Check the photo:

Is there an way to extend just the specified card, the rest of them staying just the initially length?

question from:https://stackoverflow.com/questions/65926871/angular-card-content-extends-without-pressing

Answer 1

Waitting for answers