Components: Expansion panel FOUC when contained in dialog

[crisbeto]

Might potentially be solved by https://github.com/angular/material2/pull/11778.

[crisbeto]

I tried it out and it doesn't look like it'll be fixed by #11778.

[josephperrott]

Reopening as the fix was reverted.

This seems to be a larger issue across our library as our components use animations to set state quite frequently.

[crisbeto]

@josephperrott I've opened https://github.com/angular/material2/pull/14127 which should fix the issue and avoid the presubmit issues.

[SamuelMS]

@crisbeto @josephperrott Hate to be that guy, but has there been any traction on this issue since November? Looks like it might be blocked by a larger issue, per comments in the PR?

[ywager]

Also encountered this problem

[StavM]

Hope this issue gets the attention it deserves. definitely shouldn't be a "P4" priority.
this is probably one of the top reasons to stay with 6.4.7.

[BobBDE]

Hi guys,

It's a workaround but you can use the lazy rendering of the expansion panel to prevent the animation ( with ng-template matExpansionPanelContent).

[ThomasTheJohnson]

@crisbeto @josephperrott, Is there a timeline for this fix being worked into a release? Asking so we know whether to move forward with workarounds or reworks.

[FONFAAS]

hello! is there an ETA on this?

[NaveenAmresh]

Write this following code you may solve this issue
ngOnInit() {
this.href = this.router.url;
console.log(this.href);
}

[expanded]="[this.href === 'routelink']"

[DaGLiMiOuX]

As per #11765, there is a workaround styling expansion panels when being animated. Maybe it has something to do the way of inserting the dynamic content inside dialogs using components that uses Material components in them. If you use regular HTML content like paragraphs or anything else, everything works fine.

I don't know if it is related to how the content is loaded, the load speed or the styles. Even if these styles fixes the problem "temporarily", there must be a solution somewhere.

If I have different material accordions stylings that I use for multiple dialog components and non-dialog components at the same time, It will be hard to global styling.

I really like how Angular works this way of defining components, having content separately... But we also need speed. Users do not like to wait like 477ms (like in my case) to open a Dialog with 7 components and a tab that separates those components in sections. It is kinda slow IMHO.

[matze1234]

I hope this will be solved soon.

[Hextar]

Also waiting for it to be solved.

[karansinghneu]

Facing the same issue. Any leads ?

[dcrouch79]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

[JalmariO]

@dcrouch79 This workaround works nicely until official fix. Cheers!

[ricardofct]

Hi there, this worked for me =>img1 img2

I put an initial height to fix that issue in my case worked.
ty

[EzyBakeOven]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

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

@dcrouch79 your stackblitz link is broken D:

[dcrouch79]

@EzyBakeOven I accidentally deleted it! I've created a new one with a more obvious name this time. The original link has been updated.

[george-sarji]

Has there been any update for an official fix for this? I'm also having the same issue.

[tdao7]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

Greate solution. Thanks!

[nsteeves]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

best solution on here!

[skrtheboss]

Problem still persists in v9.1.0
https://stackblitz.com/edit/angular-issue13870-workaround-ytbs1x

[jardelsimao]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

thanks alot!

[Joshanity17]

Still persist on Angular Material 10.0.1

[mindscratch]

Still persist with Angular Material 11.0.x

[Akxe]

The skackblitz links in the issue are not opening. Here is mine for Angular v11 https://stackblitz.com/edit/components-issue-1fvgvm

[waseemw]

I'm still having this issue as well with Angular Material 11

[adarsh-thakur]

Another workaround is to disable all animations until ngAfterViewInit using the [@.disabled] property on a parent element.

https://stackblitz.com/edit/angular-issue13870-workaround

Thanks alot. You Saved the Day.

[liesahead]

I think the problem is inside dialog itself, because I noticed that all content is jumping when dialog is opening. To reproduce that you can open any dialog in angular material dialog example page. The content jumps a little. We have separated dialog header and footer (actions) and now content jumping became very noticeable. At first thought that there is a bug in our project, but then decided to check the material dialog example page.

Open this stackblitz:
https://stackblitz.com/angular/rogvlbmonba?file=src%2Fapp%2Fdialog-overview-example.ts

And now open dialog. You will notice how buttons are jumping a little. If you cannot - enable CPU throttling in devtools.

[Synzed]

Same thing happens with an expansion panel inside a mat-menu .. problem still persists