state

Experimental Function

Class Export

export state(stateNameExpr: string, styles: AnimationStyleMetadata) : AnimationStateDeclarationMetadata

state is an animation-specific function that is designed to be used inside of Angular2'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 Angular2 are used.

state declares an animation state within the given trigger. When a state is active within a component then its associated styles will persist on the element that the trigger is attached to (even when the animation ends).

To animate between states, have a look at the animation transition DSL function. To register states to an animation trigger please have a look at the trigger function.

The void state

The void state value is a reserved word that angular uses to determine when the element is not apart of the application anymore (e.g. when an ngIf evaluates to false then the state of the associated element is void).

The * (default) state

The * state (when styled) is a fallback state that will be used if the state that is being animated is not declared within the trigger.

Usage

state will declare an animation state with its associated styles within the given trigger.

• stateNameExpr can be one or more state names separated by commas.
• styles refers to the styling data that will be persisted on the element once the state has been reached.

// "void" is a reserved name for a state and is used to represent
// the state in which an element is detached from from the application.
state("void", style({ height: 0 }))

// user-defined states
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))

Example (live demo)

import {Component, NgModule, animate, state, style, transition, trigger} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'example-app',
  styles: [`
    .toggle-container {
      background-color:white;
      border:10px solid black;
      width:200px;
      text-align:center;
      line-height:100px;
      font-size:50px;
      box-sizing:border-box;
      overflow:hidden;
    }
  `],
  animations: [trigger(
      'openClose',
      [
        state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
        transition(
            'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
      ])],
  template: `
    <button (click)="expand()">Open</button>
    <button (click)="collapse()">Closed</button>
    <hr />
    <div class="toggle-container" [@openClose]="stateExpression">
      Look at this box
    </div>
  `
})
export class MyExpandoCmp {
  stateExpression: string;
  constructor() { this.collapse(); }
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }
}

@NgModule({imports: [BrowserModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
export class AppModule {
}

exported from @angular/core/index defined in @angular/core/src/animation/metadata.ts