Angular2 Use animation from outside the component
I 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 like this:
<saved-overlay #myOverlay='saved-overlay'></saved-overlay>
Either way, call the inOut animation outside of my component (i.e. in the template where I reference that component). Ideally I would like to use this animation for my component itself:
<saved-overlay #myOverlay='saved-overlay' [@inOut]></saved-overlay>
However, it throws an error stating that my animation inOut
is undefined.
source to share
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 there is no need to link to anything or specify in the template:
<saved-overlay #myOverlay='saved-overlay'></saved-overlay>
Please note that I use a random property, because in fact it does not care about this, because you are using a special status ( *
and void
) so you do not need to do anything to keep this property and name it whatever you want ...
source to share