title: Angular2 RC4 Animation Trigger Binding Error
body: <p>I am getting an error when I bind an animation trigger name in the template.
  [@triggerName] doesn't seem to work.  What am I missing?</p>
  
  <p>Component</p>
  
  <pre><code>import {Component, ViewChild, ViewChildren, Input, ElementRef, Renderer} from '@angular/core';
  import {trigger, state, style, transition, animate} from '@angular/core';
  import 'rxjs/add/operator/map';
  
  @Component({
      selector: 'Header',
      templateUrl: '/components/header/header.html',
      directives: [],
  
  providers: [],
      host: {'(document:click)': 'closeLoginModal($event)'},
      animations: [
          trigger('showLoginTrigger', [
              state('true', style({opacity: '1',})),
              state('false', style({opacity: '0',})),
              transition('0 =&gt; 1', animate('400ms ease-in')),
              transition('1 =&gt; 0', animate('400ms ease-out'))
          ])
      ]
  })
  export class Header {
      static get parameters() {
          return [[ElementRef]];
      }
      constructor(ElementRef) {
          this.el = ElementRef.nativeElement;
          this.showLogin = true;
          this.showMenu = false;
          this.test = true;
      }
      closeLoginModal(e) {
          if (this.el.contains(e.target)) return;
          this.showLogin = false;
      }
  }
  </code></pre>
  
  <p>Template Jade</p>
  
  <pre><code>button.no-border((click)='test=!test') LOGIN
      .login-modal(*ngIf='showLogin', [@showLoginTrigger]='test')
          h2
              | Publisher
              br
              | Login
  </code></pre>
  
  <p>The error I'm getting is:</p>
  
  <blockquote>
    <p>Can't bind to '@showLoginTrigger' since it isn't a known native
    property</p>
  </blockquote>