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
– Pardeep Jain, Commented Apr 3, 2017 at 12:20

Cristian Agudelo · Accepted Answer · 2017-09-15 17:16:06Z

1

you must import your state dependence.

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

Luck!

answered Sep 15, 2017 at 17:16

Cristian Agudelo

6271 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

borkovski · Accepted Answer · 2017-04-03 12:24:54Z

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 3, 2017 at 12:24

borkovski

9788 silver badges12 bronze badges

Comments

Shushanth Pallegar · Accepted Answer · 2017-04-03 12:25:03Z

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 3, 2017 at 12:25

answered Apr 3, 2017 at 12:23

Shushanth Pallegar

2,8721 gold badge16 silver badges17 bronze badges

4 Comments

Pardeep Jain Over a year ago

in angular2 it will be (onclick),

Shushanth Pallegar Over a year ago

@PardeepJain in angular 2 its (click) .

Pardeep Jain Over a year ago

misunderstood with javascript and angular2 here, my mistake.

Shushanth Pallegar Over a year ago

@PardeepJain happens :) , no problem

Collectives™ on Stack Overflow

Angular 2 Animation Error

3 Answers 3

Comments

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Related