title: angular 4 programmatic animation
body: <p>How to add animation programatically ?</p>
  
  <pre><code>@Component({
      moduleId: module.id,
      selector: 'my-toolbar',
      templateUrl: './my-toolbar.component.html',
      styleUrls: ['./my-toolbar.component.scss'],
      encapsulation: ViewEncapsulation.None,
      animations: [
          trigger('myToolbarState', [
              state('initial', style({top: '*'})),
              state('up', style({top: '-50px')),
              transition('initial =&gt; up, up =&gt; initial',
                  animate(HEADER_SHRINK_TRANSITION))
          ])
      ]
  })
  </code></pre>
  
  <p>How to achieve the same without annotation ? My underlying goal is to create a dynamic trigger function that uses different values based on some <code>@Input</code>.</p>
  
  <p>It is important to note that the animations or the triggers must have at-least one variable. That makes this question different from how do I reuse animations.</p>