Angular2 Use animations from outside a component

Question

I have quickly created a simple component

@Component({
  selector: 'saved-overlay',
  templateUrl: './saved-overlay.html',
  exportAs: 'saved-overlay',
  animations: [
    trigger('inOut', [
      transition('void => *', [
        animate("300ms ease-out", keyframes([
          style({opacity: 0}),
          style({opacity: 1})
        ]))
      ]),
      transition('* => void', [
        animate("300ms ease-out", keyframes([
          style({opacity: 1}),
          style({opacity: 0})
        ]))
      ])
    ])
  ]
})
export class SavedOverlayComponent {
}

and I call it in my template this way :

<saved-overlay #myOverlay='saved-overlay'></saved-overlay>

Is there anyway to call the inOut animation from outside my component (i.e. in the template where I reference this component). What I would like ideally would be to use this animation on my component itself :

<saved-overlay #myOverlay='saved-overlay' [@inOut]></saved-overlay>

However, it does trigger an error saying that my inOut animation isn't defined.

Answer 1

You can use @HostBinding for this:

@Component({
  selector: 'saved-overlay',
  templateUrl: './saved-overlay.html',
  exportAs: 'saved-overlay',
  animations: [
    trigger('inOut', [
      transition('void => *', [
        animate("300ms ease-out", keyframes([
          style({opacity: 0}),
          style({opacity: 1})
        ]))
      ]),
      transition('* => void', [
        animate("300ms ease-out", keyframes([
          style({opacity: 1}),
          style({opacity: 0})
        ]))
      ])
    ])
  ]
})
export class SavedOverlayComponent {
  @HostBinding("@InOut")
  foo:any;
}

then no need to bind to anything or specify it in the template :

<saved-overlay #myOverlay='saved-overlay'></saved-overlay>

Note that I use a random property because we actually don't care about it, as you use the special states (* and void), so you don't need to store anything inside this property, and name it as you like ...