12

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

Improve this question
1
  • 3
    import { NoopAnimationsModule } from '@angular/platform-browser/animations'; instead of import { BrowserAnimationsModule } '@angular/platform-browser/animations'; in your main AppModule and place in the imports array. This turns off animations altogether. Outside of that it's unclear what you are asking. Commented Jun 18, 2017 at 3:37

4 Answers 4

Reset to default
11

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

If I want to disable the animation in specific condition then what should I do.
try add transition in your component field example .mat-dialog-container{ transition: none; }
This doesn't work to me, I think it's not a transition anymore.
This is like turning off your TV by going to the switch breaker :-/
4

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>
Improve this answer

3 Comments

Any idea how to modify the animation to animate down instead of up?
I tried using this technique to substitute my own animation trigger, instead of [@.disabled] and my trigger was ignored. @Yuri any way to use my own animation trigger (for sliding in from the right side) instead of disabling the built in one?
@yuri, it works BUT it disable all other components that uses the defaultContainerElement, for example matMenu (vertical three dots), I can see the restore function but how can I use it in such a way that when the app initializes all other component that use the defaultContainerElement will act as normal?
2

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.

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.