How to disable animation while opening dialog in angular material 2 with angular 4

Question

I\'m trying to create the dialog but problem is I want to disable the animation in the dialog so how to disable it.

Answer 1

In case you want to keep your animations on your app but being able to disable the one attached to a dialog you can override the dialog container by one you can control and disable all the animations inside that container.

Override OverlayContainer component

• Create a custom OverlayContainer which extends the one from the cdk

  import { OverlayContainer } from '@angular/cdk/overlay';
  
  export class CustomOverlayContainer extends OverlayContainer {
      _defaultContainerElement: HTMLElement;
  
      constructor() {
          super();
      }
  
      public setContainer( container: HTMLElement ) {
          this._defaultContainerElement = this._containerElement;
          this._containerElement = container;
      }
  
      public restoreContainer() {
          this._containerElement = this._defaultContainerElement;
      }
  }
  

• Override the cdk OverlayContainer by the custom one on the app module providers

  export function initOverlay() {
      return new CustomOverlayContainer();
  }
  @NgModule( {
       ...
       providers: [
           ...
           {
               provide: OverlayContainer,
               useFactory: initOverlay
           }
           ...
       ]
       ...
  })
  

Replace the dialog wrapper

Get access to the new dialog container and replace the default one

export class AppComponent implements AfterViewInit {
    @ViewChild( 'dialogContainer' ) dialogContainer: ElementRef;

    constructor( private dialog: MatDialog, private overlayContainer: OverlayContainer ) {
    }

    ngAfterViewInit() {
        (this.overlayContainer as CustomOverlayContainer).setContainer( this.dialogContainer.nativeElement );

        this.dialog.open( ... );
    }
}

Disable animations

Add the [@.disabled] binding to your container in order to disable all the animations happening inside it. https://angular.io/api/animations/trigger#disable-animations