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

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