How to disable angular 2 animations for testing with protractor?

angular, protractor

Solution

Now that this bug is closed you can disable child animations using a special binding called `@.disabled`. It can be applied both to local components and also app-wide.

Here's a quote from their code doc:

@Component({
  selector: 'my-component',
  template: 
    <div [@.disabled]="isDisabled">
      <div [@childAnimation]="exp"></div>
    </div>
  animations: [
    trigger("childAnimation", [
      //...
    ])
  ]
})

class MyComponent {
  isDisabled = true;
  exp = '...';
}

Or app-wide:

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

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
})
class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = true;
}

I hope this helps!

Problem

I can hardly find anything about this. Almost everything that comes up on google is about Angular 1, and what I found about Angular 2 didn't work (http://www.talkinghightech.com/en/angular-2-end-2-end-testing/). I'm looking for a way to disable both CSS animations and the animations I have on my angular 2 components.

Original source

Related problems