Angular material dialog animation terribly slow on mobile

This is what I did to disable dialog animations just on android devices.

I used Ng2DeviceService to determine whether it was an android device. Could be easily modified to look for other conditions.

This works for angular 5. Not sure about older versions.

I did this all in my app.module.ts

Add imports

import { AnimationDriver, ɵWebAnimationsDriver, ɵNoopAnimationDriver } from '@angular/animations/browser';

Create an animation factory.

 /** * Disable animations for dialogs on slow devices * @returns {WebAnimationsDriver} */const animationFactory = () => {  const deviceService = new Ng2DeviceService();  const noop = AnimationDriver.NOOP;  const driver = new ɵWebAnimationsDriver();  const originalAnimate = driver.animate;  const isAndroid = deviceService.os === 'android';  let disableComplexAnimations = false;  if (isAndroid) {    disableComplexAnimations = true;  }  driver.animate = (element: any, keyframes: {    [key: string]: string | number;  }[], duration: number, delay: number, easing: string, previousPlayers?: any[]) => {    if (disableComplexAnimations && element && element.nodeName === 'MAT-DIALOG-CONTAINER') {      return noop.animate(element, keyframes, duration, delay, easing, previousPlayers);    } else {      return originalAnimate(element, keyframes, duration, delay, easing, previousPlayers);    }  };  return driver;};

Register is in your providers list:

  providers: [    { provide: AnimationDriver, useFactory: animationFactory },  ],