Angular2 animation trigger

Question

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.

Heres my idea:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  animations: [
    trigger('wrongCredentials', [
      transition('* => *', [
        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 => res.json())
          .subscribe(
            data => {

              localStorage.setItem('id_token', data.token);
              this.router.navigate(['dashboard']);

            },
            err => {
              console.log(err);
              this.wrongCredentials = "" + new Date().getTime();
              console.log(this.wrongCredentials);
            },
            () => console.log('Authentication Complete')
          );

      }

}

And the html

<div class="auth">

  <div class="auth-container">
    <div class="card" [@wrongCredentials]="wrongCredentials">
      <div class="auth-header">
        <h1 class="auth-title">{{title}}</h1>
      </div>
      <div class="auth-content">
        <p class="text-xs-center">LOGIN TO CONTINUE</p>
        <form (ngSubmit)="doLogin()" novalidate="">
          <div class="form-group">
            <label>Username</label>
            <input [(ngModel)]="username" name="username" class="form-control underlined"  placeholder="Your username" required>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input [(ngModel)]="password" name="password" type="password" class="form-control underlined" placeholder="Your password" required>
          </div>
          <div class="form-group">
            <label>
              <input class="checkbox" type="checkbox">
              <span>Remember me</span>
            </label>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-block btn-primary">Login</button>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>

Now the problem is how to trigger the animation multiple times. Therefore I have to change wrongCredentials to another random string to trigger the animation?

Is there any other idea how to trigger the animation directly via a function call?

As of now how do yoi trigger it?? Show us that also. – micronyks Dec 12 '16 at 05:50 — micronyks, Dec 12 '16 at 05:50

score 0 · Answer 1 · answered Feb 28 '17 at 17:00

Using @wrongCredentials is fine, but I would set it equal to something other than 'wrongCredentials' such as state since you are using wrongCredentials to do something else. Then whenever you want to toggle between the states in your doLogin() function, call this.state = 'active' or 'inactive' and then use animations for each state.

<div class="card" [@wrongCredentials]="state">

Your animations could look something like this.

animations: [
trigger('wrongCredentials', [
        state('inactive', style({
            //what to do when not shown
    })),
        state('active',   style({
            //what you want it to do when shown
    })),
    transition('inactive => active', 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}),
    transition('active => inactive', animate('//add reverse animation or display: unset is what I used'))
    ])
]

doLogin() {
    ...
    err => {
       this.state = 'active';
       console.log(err);
       this.wrongCredentials = "" + new Date().getTime();
       console.log(this.wrongCredentials);
    }
}

I got help from this tutorial: https://coursetro.com/posts/code/25/Understanding-Angular-2-Animations-Tutorial

Best of Luck!

Angular2 animation trigger

1 Answers1