mat-slide-toggle unexpected animation in certain conditions

[BartoszWasiluk]

What is the expected behavior?

MatSlideToggle shouldn't display an animation after rendering with given state

What is the current behavior?

MatSlideToggle display a slide animation from off -> on in certain conditions

What are the steps to reproduce?

https://stackblitz.com/edit/angular-pzaey9?file=animation-bug.component.ts
Click EDIT -> then click the "SAVE WITHOUT BUG" button -> it's expected bahviour
Click EDIT -> then click the "SAVE WITH BUG" button -> unexpected animation

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular version: 7.1.3
Material Version: 7.1.1
OS: Windows10 / Chrome 70.0.3538.110 (64-bit) (it works well on Firefox, Edge, IE11)
TS: ~3.1.1

Is there anything else we should know?

Making one of the following fixes this behaviour:

• removing animation from Component declaration (I need it in my component)
• moving button above SlideToggle
• setting additional *ngIf on SlideToggle

[devversion]

I tried looking into that, but this doesn't really look like a bug specific to Angular Material.

This is with animations added

This is without animations added

---

It looks like something causes a style recalculation if the element is being removed. At first glance I couldn't find anything specific to @angular/animations that would enforce a style recalculation, but I suspect that something in there causes the style recalculation.

We should also note that clicking on the Save with bug button causes the active browser element to be blurred due to element removal.

[devversion]

I'm closing this issue as there haven't been any other reports. It's most likely a bug in Angular animations, and we should report an issue there. On our end, I don't think we are doing anything special for the slide-toggle.

[angular-automatic-lock-bot]

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.}