How to disable animation when opening a dialog in angular material 2 using angular 4

Question

I am trying to create a dialog, but the problem is that I want to turn off the animation in the dialog to turn it off.

Answer 1

you can disable by importing

NoopAnimationsModule

import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [NoopAnimationsModule], ... }) 

Additional information https://material.angular.io/guide/getting-started

Answer 2

If you want to save the animation in your application, but you can disable the application attached to the dialog box, you can override the dialog container on one, you can control and disable all animations inside this container.

Override the OverlayContainer component

• Create a custom OverlayContainer that extends one of 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 shell using the application vendor user interface.

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

Replace Dialog Shell

Get access to the new dialog container and replace the standard 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( ... ); } } 

Turn off animation

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

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