Repository navigation
mat-expansion-panel not support *ngFor in mat-accordion #7754
Description
Bug, feature request, or proposal:
without *ngFor, 2 expansion-panel will work correctly inside a mat-accordion.
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
This is the expansion 1 title
</mat-expansion-panel-header>
This the expansion 1 content
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
This is the expansion 2 title
</mat-expansion-panel-header>
This the expansion 2 content
</mat-expansion-panel>
</mat-accordion>But if I use *ngFor, the content will not open when I click.
<mat-accordion>
<mat-expansion-panel *ngFor="let panel of panels">
<mat-expansion-panel-header>
{{panel.title}}
</mat-expansion-panel-header>
{{panel.content}}
</mat-expansion-panel>
</mat-accordion>What is the expected behavior?
with *ngFor, it should still work as expected.
What is the current behavior?
with *ngFor, the expansion panel will not open.
What are the steps to reproduce?
Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/DlHd6U
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV
The plunker template not working....
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 5.0.0-beta7
material 2.0.0-beta.12
Typescript 2.4.2
Browsers Chrome
Is there anything else we should know?
Thanks.
Activity
julianobrasil commentedon Oct 13, 2017
Your code is working right: https://stackblitz.com/edit/expansion-panel
Try to modify the code in stackblitz to reproduce the problem.
JiaLiPassion commentedon Oct 13, 2017
@julianobrasil , thank you very much, I use
sideNavand it seems I used wrongcss, it worked now.https://stackblitz.com/edit/expansion-panel-axzbag?file=styles.scss
nsksaisaravana commentedon Sep 13, 2018
@JiaLiPassion Thanks a lot and you saved my day.
manishgandotra74 commentedon Apr 9, 2019
Try this https://stackblitz.com/edit/dynamic-expansion-panel?file=src%2Fapp%2Fapp.component.html
angular-automatic-lock-bot commentedon Sep 10, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.