Angular 2 - How to set animations on a Directive?

As I mentioned in your question's comment section.

You can have the animation configuration in your parent component. Then the directive just adds a class on its host when it satisfies the threshold.

In your directive, you can have something like:

@Input() classThatTriggersAnimation = "do-animation";
@HostBinding('[@nameOfAnimation]') animationTrigger = ""; 

// when logic is true
this.animationTrigger = this.classThatTriggersAnimation;

Angular 4.2 brought in a lot of animation improvements. One of them is AnimationBuilder, which allows for programmatic animation construction.

You just need to inject AnimationBuilder in your directive, and you can turn any AnimationMetadata into working animation.

@Directive({
  selector: '[zetFadeInOut]',
})
export class FadeInOutDirective {
  player: AnimationPlayer;

  @Input()
  set show(show: boolean) {
    if (this.player) {
      this.player.destroy();
    }

    const metadata = show ? this.fadeIn() : this.fadeOut();

    const factory = this.builder.build(metadata);
    const player = factory.create(this.el.nativeElement);

    player.play();
  }

  constructor(private builder: AnimationBuilder, private el: ElementRef) {}

  private fadeIn(): AnimationMetadata[] {
    return [
      style({ opacity: 0 }),
      animate('400ms ease-in', style({ opacity: 1 })),
    ];
  }

  private fadeOut(): AnimationMetadata[] {
    return [
      style({ opacity: '*' }),
      animate('400ms ease-in', style({ opacity: 0 })),
    ];
  }
}

• Example repository
• A New Wave of Animation Features in Angular 4.2+

I used a bit of a workaround based on this response to the issue mentioned in benshabatnoam's answer.

Directives are actually just components without templates. You can create a component that acts identical to a directive by using a attribute selector ( eg: [selector]) and making the template: <ng-content></ng-content>.

As a result, you can create a 'foux-directive' component like so:

@Component({
    selector: '[fadeInAnimation]',
    animations: [
        trigger('fadeIn', [
             transition(':enter', [
                 style({opacity:'0'}),
                 animate(200, style({opacity:'1'}))
             ])
        ])
    ], 
    template: `<ng-content></ng-content>`,
})
export class FadeInDirective {
    @HostBinding('@fadeIn') trigger = '';
}

and use it like you would use any directive:

<div fadeInAnimation> something I want to animate </div>