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.

n00dl3 · Accepted Answer · 2017-04-25 14:04:44Z

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 ...

Collectives™ on Stack Overflow

Angular2 Use animations from outside a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related