No provider for MatExpansionPanel if used inside child component in *ngFor

Issue

I want to separate my mat-accordion from each of the mat-expansion-panel using child component.

my app.component.html looks like this:

<mat-accordion>
  <mat-expansion-panel *ngFor="let customer of customers">
    <app-customer [name]="customer"></app-customer>
  </mat-expansion-panel>
</mat-accordion>

My child component looks like this:

<mat-expansion-panel-header>
      {{ name }}
</mat-expansion-panel-header>

When i start the application i get the following error in console (and nothing is displayed)

Uncaught Error: Template parse errors:
No provider for MatExpansionPanel ("[ERROR ->]<mat-expansion-panel-header>
      {{ name }}
</mat-expansion-panel-header>
"): ng:///AppModule/CustomerComponent.html@0:0

What am I doing wrong? If I don't use a child component, it works okay

Solution

Doing this solved the problem to me, by adding it in the component declarations.

@Component({
  selector: 'app-x',
  templateUrl: './app-x.html',
  styleUrls: ['./app-x.scss'],
  viewProviders: [MatExpansionPanel]
})

Answered By - Divyanshu Rawat