#Material Accordion around components with root Expansion Panel

4 messages · Page 1 of 1 (latest)

jade gazelle
#

I have the following situation:

<mat-accordion>
  <app-mycomponent *ngFor=[...] />
<mat-accordion>

The root element inside app-mycomponent is a mat-expansion-panel.

Now, the expansion panels work all fine. But they are not neatly grouped together in an accordion because I believe the styles break due to app-mycomponent being the direct children of the accordion.

Can anyone suggest a workaround? Thanks a heap!

smoky fable
#

A Stackblitz minimal reproduction would be really helpful.

nimble zephyr
#

The mat-accordion and the nested mat-expansion-panel-header must be part of the same template (i.e. they must reside in the same component).

#

That is because mat-accordion uses ContentChildren to find the nested expansion panels.