Angular2 trigger animation from parent component

Question

I'm trying to trigger an animation on an hidden element of a child component. To be simple, the animation should occur when the element appears, and then each time a user click on a button from the parent component.

Here is simple code : (tried to plunkr it, but impossible to import trigger component from angular core)

app.ts

import {ChildComponent} from './child';

@Component({
  selector: 'my-app',
  template: `
    <button id="showChildButton" (click)="setShowChild()">Show Child</button>
    <button id="triggerAnimation">Trigger animation</button>
    <child-component *ngIf="showChild"></child-component>
  `
  .....
})
export class App {

  showChild: boolean = false;

  setShowChild() {
    this.showChild = true;
  }
}

child.ts

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

@Component({
  selector: 'child-component',
  template: `<h1 [@inflateIn]>Hello</h1>`,
  animations: [
        trigger('inflateIn', [
            transition('void => *', [
                animate(100, style({ transform: 'scale(1.1)'}))
            ]),
            transition('* => *', [
                animate(100, style({ transform: 'scale(1.1)'}))
            ])
        ])
    ]
})
export class ChildComponent {

}

I am able to animate the , the first time it appears, but I can't figure out how to trigger this animation again, when clicking on button #triggerAnimation of the parent component. I searched for examples but I didn't find anything that solve my case.

Thanks for your help

Answer 1

You have to toggle the showChild variable. You can change your setShowChild() method as follows setShowChild() { this.showChild === false ? true : false; } setShowChild() { this.showChild === false ? true : false; }

It checks if this.showChild is false so make it true otherwise false to hide it again. I hope this is what you wanted to get the desired result?