Angular 2 Animation Error

Question

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.

your coding is from angular2 but you are importing file of angular1.x ? — Pardeep Jain, Apr 03 '17 at 12:20

score 1 · Answer 1 · answered Sep 15 '17 at 17:16

1

you must import your state dependence.

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

Luck!

answered Sep 15 '17 at 17:16

Cristian Agudelo

628
1
7
10

Shushanth Pallegar · Answer 2 · 2017-04-03T12:25:03.667

0

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>

edited Apr 03 '17 at 12:25

answered Apr 03 '17 at 12:23

Shushanth Pallegar

2,832
1
14
16

in angular2 it will be `(onclick)`, – Pardeep Jain Apr 03 '17 at 12:24
@PardeepJain in angular 2 its (click) . – Shushanth Pallegar Apr 03 '17 at 12:26
misunderstood with javascript and angular2 here, my mistake. – Pardeep Jain Apr 03 '17 at 12:27
1

@PardeepJain happens :) , no problem – Shushanth Pallegar Apr 03 '17 at 12:28

score 0 · Answer 3 · answered Apr 03 '17 at 12:24

0

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

answered Apr 03 '17 at 12:24

borkovski

938
8
12

Angular 2 Animation Error

3 Answers3