5

I am trying to implement a mat-accordion, where the mat-expansion-panels body show the information of an array. The array has no fixed length, so I try to add content to the body with *ngFor. But the body stays empty.

I checked if the for-loop accesses the object correctly, which it does, and adding multiple paragraphs to the expansion-panel also works. I don't know if it is simply not supported to add content with ngFor inside a mat-expansion-panel.

html

<mat-accordion>
  <mat-expansion-panel *ngFor="let day of days">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{day.date}}
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Works without *ngFor</p>
    <p>Multiple work aswell</p>
    <p *ngFor="let subDay of day.subDay" class="grid5">
      {{subDay.name}}
    </p>
    </mat-expansion-panel>
</mat-accordion>

ts

days = [
    {
      date: "Mon 01", 
      subDay: [
        {
          name: "morning"
        }, 
        {
          name:"afternoon"
        },
        {
          name: "evening"
        },
        {
          name: "night"
        }
      ]
    }
 ]

Here is the issue recreated.

https://stackblitz.com/edit/angular-fgo3zv

I expect the expansion-panel to also have "morning", "afternoon", "evening" and "night" when expanding the panel.

2 Answers 2

6

You code is correct, the problem is that your inner *ngFor should be the following instead of day.daily_division as the name of your array inside your day object is subDay not daily_division.

<p *ngFor="let subDay of day.subDay" class="grid5">
  {{subDay.name}}
</p>

Demo

4

I think this is helpful for you,

*ngFor="let name of days.subDay"

{{name.name}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.