Hands-On TypeScript for C# and .NET Core Developers

Triggers, states, and state transitions

Each Angular animation is encoded with a functional programming style, as a tree of function calls. The root function is always trigger, whose first argument is the name of the animation: trigger('myAnimation', [...]). The definition of the animation is contained in an array passed as the second argument. Once defined, the animation is applied to the HTML tag of the element to animate with this syntax: [@myAnimation]='<binding expression>'. All possible values returned by the expression define the animation states. For instance, an animation applied to a button might have two states identified by the strings 'opened' and 'closed', or by the true and false Boolean values of a closed property.