I've recently put together a basic 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 {
}
Now, when I include it in my template:
<saved-overlay #myOverlay='saved-overlay'></saved-overlay>
I'm wondering if there is a way to activate the inOut animation from an external source (for example, within the referencing template). Ideally, I'd like to apply this animation directly on the component like so:
<saved-overlay #myOverlay='saved-overlay' [@inOut]></saved-overlay>
However, this approach triggers an error indicating that the inOut animation is not defined.