components

components copied to clipboard

Feature Description

Currently, animations are enabled once the animation module is loaded.

To disable animation one can add the NoopAnimationsModule module and animations are disabled.

This is fine globally, but in some scenarios we would like to disable an animation for a specific component at a specific scenario, not at all scenarios.

One possible solution is to use [@.disable] which will disable all angular animations, however, some components are using CSS animations which the above does not help to solve.

It is also possible to disable CSS animations through CSS however due to the ViewEncapsulation it is not always possible.

This becomes even more of a problem for library authors which have no control over NoopAnimationsModule...

Since there is no unified approach, it is confusing and sometimes hard to accomplish.

A good example is using Virtual Scroll with MatCheckbox. The checkbox has a transition on an internal element .mat-checkbox-background which will cause flicker on virtual scroll since on render data changes the checkbox switch's context and might go through the states CHECKED/UNCHECKED/CHECKED in a second... with animation this will cause flicker!

Since we expect Virtual Scroll to enter into the table, select and other components we need this one solved. Provide a brief summary of the feature you would like to see.

This topic continue #4227 which is locked now...

You can see a video of this here https://youtu.be/VCu2LTVE7SM

Making sure I understand- is there some limitation to importing NoopAnimationsModule for a subset of the app? E.g. if I want to disable animations for my UserProfileComponent, I could import NoopAnimationsModule for just that component's module.

That's true but not practical in many ways.

• It does not allow you to toggle animation based on some state.
• It forces the entire module to disable animation for all material components, what if I just want mat-checkbox?
• It assumes one wants all animations off, which is usually not the case

Furthermore, as a library author, I allow users to inject cell templates into my grid, the template is defined, let's say in the root module, while the grid might be running anywhere.

When a cell is rendered I believe (yet didn't verify) that the module it is running on is the root module, not the module of the grid...

So it's very difficult to manage

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

+1, this is an issue I'm running into with the MatAutocomplete! Using [@.disabled] doesn't work, and using NoopAnimationsModule disables other animations that I want to keep working. Without a solution, the user experience is really bad because I have flickering when trying to keep the MatAutocomplete panel open.

I was able to make it work without the blinking, using the $event.propagation in an inner element on the mat-option

see: https://stackblitz.com/edit/mat-multiselect-autocomplete

Kudos for the help: @walid-ria