How to bind animations to content children & subscribe to animation events?

Question

I'm developing an Angular component that takes inner content and should attach animations to content children (e.g. child elements).

The usage code looks like this:

<flip-board [frontSide]="'side-2'">
  <flip-side name="side-1">Side 1<flip-side>
  <flip-side name="side-2">Side 2<flip-side>
  <flip-side name="side-3">Side 3<flip-side>
</flip-board>

Inside the FlipBoard component I need to:

1. Attach animations to all FlipSide components.
2. Listen to animations events of FlipSide.

In all articles & tutorials I've found it's shown how to attach animations and events in template but not in component's code. And in my case the template is passed by the consumer of the component and I need to assign animations and to subscribe for animations events dynamically inside the component code.

@Component({
  selector: 'flip-board',
  template: '<ng-content></ng-content>',
})
export class FlipBoard {
  @ContentChildren(FlipSide) sides: QueryList<FlipSide>;

  ngAfterContentInit() {
    // TODO: 1. Attach animations to this.sides
    // TODO: 2. Subscribe to animation events of this.sides
  }
}

Is it possible?

Answer 1

Concerning the content elements animation binding, you could try to bind an animation trigger to the parent element. Then the "query()" feature allows you to animate elements from css selectors and much more.

For examples have a look at this article: A New Wave of Animation Features in Angular