trigger

function experimental

npm Package	@angular/animations
Module	import { trigger } from '@angular/animations';
Source	animations/src/animation_metadata.ts

function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;

Description

trigger is an animation-specific function that is designed to be used inside of Angular's animation DSL language. If this information is new, please navigate to the component animations metadata page to gain a better understanding of how animations in Angular are used.

trigger Creates an animation trigger which will a list of state and transition entries that will be evaluated when the expression bound to the trigger changes.

Triggers are registered within the component annotation data under the animations section. An animation trigger can be placed on an element within a template by referencing the name of the trigger followed by the expression value that the trigger is bound to (in the form of [@triggerName]="expression".

Animation trigger bindings strigify values and then match the previous and current values against any linked transitions. If a boolean value is provided into the trigger binding then it will both be represented as 1 or true and 0 or false for a true and false boolean values respectively.

Usage

trigger will create an animation trigger reference based on the provided name value. The provided animation value is expected to be an array consisting of state and transition declarations.

@Component({
  selector: 'my-component',
  templateUrl: 'my-component-tpl.html',
  animations: [
    trigger("myAnimationTrigger", [
      state(...),
      state(...),
      transition(...),
      transition(...)
    ])
  ]
})
class MyComponent {
  myStatusExp = "something";
}

The template associated with this component will make use of the myAnimationTrigger animation trigger by binding to an element within its template code.

<!-- somewhere inside of my-component-tpl.html -->
<div [@myAnimationTrigger]="myStatusExp">...</div>

Disable Animations

A special animation control binding called @.disabled can be placed on an element which will then disable animations for any inner animation triggers situated within the element as well as any animations on the element itself.

When true, the @.disabled binding will prevent all animations from rendering. The example below shows how to use this feature:

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

The @childAnimation trigger will not animate because @.disabled prevents it from happening (when true).

Note that @.disabled will only disable all animations (this means any animations running on the same element will also be disabled).

Disabling Animations Application-wide

When an area of the template is set to have animations disabled, all inner components will also have their animations disabled as well. This means that all animations for an angular application can be disabled by placing a host binding set on @.disabled on the topmost Angular component.

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

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

What about animations that us query() and animateChild()?

Despite inner animations being disabled, a parent animation can query for inner elements located in disabled areas of the template and still animate them as it sees fit. This is also the case for when a sub animation is queried by a parent and then later animated using animateChild.