How do you globally disable Angular animations based on media query in a standalone app?

Question

It's previously been possible to disable animations in the whole app based on a media query:

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppRootComponent],
  imports: [
    BrowserAnimationsModule.withConfig({
      disableAnimations: window.matchMedia("(prefers-reduced-motion)").matches, // <-
    }),
    // ...
  ],
})
export class AppModule {}

With the new provider pattern, the module import is changed to provideAnimations:

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    // ...
  ]
});

This, however, doesn't accept any configurations like previously.

There seems to be a provideNoopAnimations alternative, but I don't see how you dynamically change which provider to use, based on a media query (prefers-reduced-motion)

How is this achieved now?

Answer 1

It can actually be done very simply using the two new providers and resolving the media query inline/through a variable:

const disableAnimations: boolean = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

bootstrapApplication(AppComponent, {
  providers: [
    !disableAnimations ? provideAnimations() : provideNoopAnimations(),
    // ...
  ]
});