Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi, I'm studying Angular and I have this problem. How do I make one accordion open at a time with an ngFor in the code?

I would like to try inserting an If which indicates that if one accordion is open, the other closes automatically. If I try to put the ngIf in the html, the accordion no longer works and is not shown. What am I doing wrong?Can someone help me please?

What I have tried:

user-detail.component.ts

<mat-accordion >
    <mat-expansion-panel 
    (click)="commentOpen(post.id)">
      <mat-expansion-panel-header *ngIf="panelOpenState">
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
        <mat-panel-description>
          Currently I am {{panelOpenState ? 'open' : 'closed'}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <form [formGroup]="commentForm" >
        <input matInput type="text" formControlName="email" placeholder="email" #commentEmail required>
        <input matInput type="text" formControlName="name" #commentName placeholder="name" required>
        <textarea matInput class="commentArea" formControlName="body" #commentBody placeholder="Commenta..."></textarea>
        <button type="submit" [disabled]="commentForm.invalid" 
        (click)="onSubmitComment(commentEmail.value, commentName.value, commentBody.value, post.id)">Invia</button>
      </form>

      <div id="txtdataCommens" *ngFor="let comment of comments">
        {{comment.id}}
        <br>
        {{comment.email}}
        <br>
        {{comment.name}}
        <br>
        {{comment.body}}
      </div>
    </mat-expansion-panel>

  </mat-accordion>


user-detail.component.ts

panelOpenState = false;

commentOpen(idPost:any){
    this.commentService.postId = idPost
    this.getCommentDetailByUser();
    this.panelOpenState = !this.panelOpenState
  }
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900