How to disable animations in angular material

Question

I have used angular material version: 5.2.1

And wanted to know how to disable their animations, especially the matDialog.

I have tried @.disabled but no luck.

There is a feature request being tracked here in the material repository regarding disabling only the dialog animations [Add possibility to turn off animation of dialog enter/exit](https://github.com/angular/material2/issues/3616) — Eric Phillips, Feb 06 '19 at 15:17

Pardeep Jain · Accepted Answer · 2018-05-17T07:02:13.030

20

You can use NoopAnimationsModule by angular material

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

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

Or if you want to remove transition on some specific components you can do it via CSS like this

.mat-dialog{ transition: none; }

edited May 17 '18 at 07:02

answered May 17 '18 at 07:00

Pardeep Jain

84,110
37
165
215

that's it? just import NoopAnimationsModule? – kimondoe May 17 '18 at 07:01
yes, for more information on this module you can refer this https://material.angular.io/guide/getting-started – Pardeep Jain May 17 '18 at 07:02
1

Works, but you should mention to import in main app module. – Edgar Quintero Feb 19 '19 at 21:27
I don't feel to import in `app.module` if you are using lazzy loaded modules isn't it @EdgarQuintero? – Pardeep Jain Feb 20 '19 at 04:35
if you import 'NoopAnimationsModule' then spinners won't work also. .mat-dialog transition does nothing. – Romko Jul 03 '20 at 10:54
Not tested this, might be an open issue in the version you are checking. – Pardeep Jain Jul 07 '20 at 09:52

score 3 · Answer 2 · answered Dec 11 '21 at 16:10

The approved answer does not work and is not consistent with Angular docs, at least since Angular 6. To disable animations in Angular 6 to 13, from the official doc, use:

// In app.component.ts

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = true;  // Set to true to disable animations
}

This is useful for end-to-end (E2E) testing.

How to disable animations in angular material

2 Answers2

Linked