CODEWITHSUNDEEP
angularangular-animations
Lasse Sb
Lasse Sb

Reputation: 81

Angular 2 Animation Error

I tried to make a simple Animation with Angular:

import { Component, animate, trigger, state, style, transition } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('divState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal <=> highlighted', animate(300))
    ])
  ]
})


export class AppComponent {
  private state;

  constructor(){
    this.state = 'normal';
  }

  onAnimate() {
    this.state == 'normal' ? this.state = 'highlighted' : this.state = 'normal';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
    <button (click)="onAnimate()">Switch</button>
</div>
<div style="height: 20px">
<div 
    style="width: 100px; height: 100px" [@divState]="state">
</div>

But if I click on the Button it said:

Uncaught ReferenceError: onAnimate is not defined at HTMLButtonElement.onclick ((index):13)

Does anybody know what is wrong there?

Edit: Button works now, but the animation still fails and the div also not shows up.

Upvotes: 0

Views: 1629

Answers (3)

Cristian Agudelo
Cristian Agudelo

Reputation: 627

you must import your state dependence.

import {style,animate,state,keyframes } from '@angular/core';

Luck!

Upvotes: 1

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

It should be as below . use (click) instead of (onclick) , because angular 2 will trigger zone() which trigger a change detection on Async implementations (event clicks , XHR , )

<div>
    <button (click)="onAnimate()">Switch</button>
</div>

Upvotes: 0

borkovski
borkovski

Reputation: 978

You should use event binding here:

<button (click)="onAnimate()">Switch</button>

Check tutorial for more details about event binding: https://angular.io/docs/ts/latest/guide/user-input.html

Upvotes: 0

Related Questions