How to load child component only when mat expansion panel is expanded?

Question

I have mat accordion in which I am dynamically creating expansion panels and its content components

<mat-accordion>
<Mat-expansion-panel ngfor>
<Header>
<Custom component with some input for api call>

I want to render and call api inside custom component only when expansion panel is expanded.

Currently api is getting called for each panel even if it is close.

Answer 1

Move the content to the specific ng-template matExpansionPanelContent. (https://material.angular.io/components/expansion/api#MatExpansionPanelContent)

<mat-expansion-panel>
  <mat-expansion-panel-header>
    My Header
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    My lazy content
  </ng-template>
</mat-expansion-panel>