-1

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.

Daniel Grima
  • 2,765
  • 7
  • 34
  • 58

1 Answers1

3

There's a couple of thing wrong with your plunker:

  1. You have to import the BrowserAnimationsModule from @angular/platform-browser/animations in your AppModule.
  2. You're missing the @ in the HostBinding decorator.
  3. @HostBinding basically lets you bind some value (which could change in the lifecycle of your component) to the host element, and that is your component itself. So you have to bind to a class property rather than a method.

Here's a working version of your plunker

Osman Cea
  • 1,467
  • 9
  • 18
  • Thanks for your reply! I guess I was in a bit of a hurry when I wrote the code in plunker. As you pointed out my mistake in my code is that I'm trying to bind to a method rather than a property. Thanks for your help :) – Daniel Grima Jul 22 '17 at 10:55