CODEWITHSUNDEEP
angularangular-material
Omkar Yadav
Omkar Yadav

Reputation: 543

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

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

Upvotes: 12

Views: 19497

Answers (4)

Daniil Andreyevich Baunov
Daniil Andreyevich Baunov

Reputation: 2883

Just came across the same problem. Angular material lib still doesn't have a clean way to disable/configure animations for specific overlay component. However, there's one hack I found that works well enough for my use-case.

So, idea is to overwrite the animations that are attached to a certain Angular Material Component (e.g. mat-select, mat-menu, etc.). In Angular Material git you can find <component>-animations.ts files next to components that have all default animations declared (e.g. https://github.com/angular/components/blob/master/src/material/select/select-animations.ts - for mat-select).

Knowing those - we can overwrite decorator properties of each of material components we want to change animation for. Note that this would only do it per component type (i.e. not per instance).

Here's how to disable animations for mat-select dropdown:

MatSelect['decorators'][0].args[0].animations[0] = trigger('transformPanelWrap', []);
MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', []);

The above snippet removes all the animations for mat-select dropdown. The trigger names are taken from the files described above (check material sources). You could also easily replace existing animations with custom ones the same way e.g.

MatSelect['decorators'][0].args[0].animations[1] = trigger('transformPanel', [
    state('void', style({
       transform: 'scale(0.1)',
       opacity: 0
    })),
]);

Indexes inside animations array correspond to the original animations declarations order. ['decorators'][0].args[0] is always the same.

Originally idea from: https://github.com/angular/components/issues/8857#issuecomment-401793529

Upvotes: 1

Simon_Weaver
Simon_Weaver

Reputation: 146110

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.

Upvotes: 2

Yuri G
Yuri G

Reputation: 56

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>

Upvotes: 4

CharanRoot
CharanRoot

Reputation: 6325

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

Upvotes: 11

Related Questions