title: Angular2 animation trigger
body: <p>I am unsing Angular2 @angular/core 2.2.1 and I want trigger my "bad credentials" animation multiple times, each time the credentials were bad.</p>
  
  <p>Heres my idea:</p>
  
  <pre><code>@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    animations: [
      trigger('wrongCredentials', [
        transition('* =&gt; *', [
          animate(300, keyframes([
            style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
            style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
            style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
          ]))
        ])
      ])
    ],
  })
  export class LoginComponent {
  
      wrongCredentials = "shown";
  
      doLogin() {
  
          let contentHeaders = new Headers();
          contentHeaders.append('Accept', 'application/json');
          contentHeaders.append('Content-Type', 'application/json');
  
          let data = {
            username: this.username,
            password: this.password
          };
  
          this.http.post(BackendUrl + '/auth', JSON.stringify(data), {headers: contentHeaders})
            .map(res =&gt; res.json())
            .subscribe(
              data =&gt; {
  
                localStorage.setItem('id_token', data.token);
                this.router.navigate(['dashboard']);
  
              },
              err =&gt; {
                console.log(err);
                this.wrongCredentials = "" + new Date().getTime();
                console.log(this.wrongCredentials);
              },
              () =&gt; console.log('Authentication Complete')
            );
  
        }
  
  }
  </code></pre>
  
  <p>And the html </p>
  
  <pre><code>&lt;div class="auth"&gt;
  
    &lt;div class="auth-container"&gt;
      &lt;div class="card" [@wrongCredentials]="wrongCredentials"&gt;
        &lt;div class="auth-header"&gt;
          &lt;h1 class="auth-title"&gt;{{title}}&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="auth-content"&gt;
          &lt;p class="text-xs-center"&gt;LOGIN TO CONTINUE&lt;/p&gt;
          &lt;form (ngSubmit)="doLogin()" novalidate=""&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;Username&lt;/label&gt;
              &lt;input [(ngModel)]="username" name="username" class="form-control underlined"  placeholder="Your username" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;Password&lt;/label&gt;
              &lt;input [(ngModel)]="password" name="password" type="password" class="form-control underlined" placeholder="Your password" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label&gt;
                &lt;input class="checkbox" type="checkbox"&gt;
                &lt;span&gt;Remember me&lt;/span&gt;
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;button type="submit" class="btn btn-block btn-primary"&gt;Login&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the problem is how to trigger the animation multiple times. Therefore I have to change <code>wrongCredentials</code> to another random string to trigger the animation?</p>
  
  <p>Is there any other idea how to trigger the animation directly via a function call?</p>