Angular 2 - How to set animations on a Directive?

Question

I have a Directive I can put on elements that checks the current scroll position of the element in question.

Looks like this:

@Directive({
    selector: '[my-scroll-animation]'
})

Whenever the position satifies a certain treshold, I want the element to appear on screen using an animation. I know that for a Component I can attach an animations property along with some settings in the host property to activate the animation.

I would like something like this:

import { myScrollAnimation } from './animations';

@Directive({
    selector: '[my-scroll-animation]'
    animations: [myScrollAnimation] // <- not possible?
})

How can I achieve this in a Directive?

Using: Angular 4.0.0-rc.4

Answer 1

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+

Answer 2

This is an open issue (as for today - 28/08/17) in angular's git reposetory. Please vote up this issue in order to put pressure on the developers to release this faster.

Answer 3

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>

Answer 4

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;