mat-accordion with-in component - angular 5

Question

I have a question component with mat-accordion to display question. I'm calling my question component to question-list component.

Everything works great until this point, the issue arises when I'm clicking on question component it is getting open and remain in that state if I'm opening another one also. As per requirement, only one should open at a time.

I see an issue is with the accordion is reside in question component and from question-list, we are looping it with *ngFor so every accordion is having one expension-pannel in it.

My code was working until I had break mine code to two-component from one question-list(parent) and question(chile)

Sample Code:- question-list.component:

<ng-template ngFor let-data [ngForOf]="questionList" let-i="index" >
    <app-question [data]="data"></app-question>
</ng-template>

question.component:-

<mat-accodion>
    <mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-description style="float:left;">
        {{data.description}}
        </mat-panel-description>
    </mat-expansion-panel-header>
    <form>
        <div class="row text-left options">
        <div class="col-md-6" *ngFor="let option of data.options;">
            <mat-checkbox>{{option.description}}</mat-checkbox>
        </div>
        </div>
   </form>
</mat-expansion-panel>
</mat-accodion>

score 0 · Answer 1 · answered Apr 24 '18 at 14:08

A question is represented by a single expansion panel. A list of questions is represented by an accordion. So your question component should be an expansion panel only, not an accordion. Then you make the accordion part of the question list with the for loop inside the accordion.

Question List:

<mat-accordion>
    <ng-container *ngFor="let data of questionList; let i = index">
        <app-question [data]="data"></app-question>
    </ng-container>
</mat-accordion>

Question:

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-description style="float:left;">
            {{data.description}}
        </mat-panel-description>
    </mat-expansion-panel-header>
    <form>
        <div class="row text-left options">
            <div class="col-md-6" *ngFor="let option of data.options;">
                <mat-checkbox>{{option.description}}</mat-checkbox>
            </div>
        </div>
   </form>
</mat-expansion-panel>

score 0 · Answer 2 · answered Apr 26 '18 at 06:02

@G. Tranter thanks, for your answer, actually this(your suggestion) I already tried and did not got any success, after that I tried the traditional way of doing collapse and expand with self-declared property in to every question object "expanded" by default this will be false to every question and we have used it as ngModel in expansion control, on change the state of one we handle other "expanded" property.

sample here which is working now,

<mat-expansion-panel [(ngModel)]="data.expanded"
name="fieldName" ngDefaultControl (opened)="panelOpenState(data._id)"
[expanded]="data.expanded">
    <mat-expansion-panel-header>
        <mat-panel-description style="float:left;">
            {{data.description}}
         </mat-panel-description>
    </mat-expansion-panel-header>
<form>
    <div class="row text-left options">
    <div class="col-md-6" *ngFor="let option of data.options;">
     <mat-checkbox>
            {{option.description}}
            </mat-checkbox>

    </div>
    </div>
 </form>

mat-accordion with-in component - angular 5

2 Answers2