I'm trying to fade out a component from the component itself. I don't know if this is possible, I'm trying to achieve this using a HostBinding
.
Animations:
animations: [
trigger('fade', [
state('fadeIn', style({ opacity: 1 })),
state('fadeOut', style({ opacity: 0, visibility: 'hidden' })),
transition('* <=> *', [
animate(250)
])
])
]
Host Binding:
HostBinding('@fade') animateComponent(state: string) {
return state;
}
The example I have is a loading overlay which is a separate component. When the loading service triggers that the loading is complete I'm trying to fade out the component.
Plunker Example: https://plnkr.co/edit/heNSZYNJErXnF8bxaCiz
I'm not sure if the animations I've set up are incorrect or else this cannot be achieved with the use of HostBinding
.