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

Angular Material 7 has a much nicer animation.

It should alleviate the problem for most developers wanting to disable it.

It opens from the center, zooming in slightly and without sliding up or down. On close it disappears instantly. It also behaves nicely on phones where the bottom toolbar is initially hidden.

It should perform much better on less capable graphics cards, older phones or dialogs with complex content.

Answer 2

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

<div #dialogContainer [@.disabled]="true"></div>

Answer 3

you can disable by importing

NoopAnimationsModule

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})

more info https://material.angular.io/guide/getting-started