UX effects in Angular 2

Question

I wan't to add some interactions to my Angular 2 project to enhance its user experience. I know how to interact with DOM, or change the status of element property. It is possible to write code for each of my component. But there are some examples which will be used site wide, for which I don't want to repeat the code everywhere I want to use it.

A simple example will the fade in when scroll elements. I know how to achieve this in a particular controller, but I need help to make this behaviour global without code repetition.

I Javascript / jQuery, we can have a master js file included which will have the event listeners bound to the elements, which is available for all pages. How to achieve similar in Angular?

Answer 1

This can mostly be done with Directives. Taking your example, you would create a [scroll-fade] Directive:

@Directive({
  selector: '[scroll-fade]'
})
export class ScrollFade {

}

You'd then need to listen for the global scroll event, with @HostListener('window:scroll') and apply your styles to the :host element.

You would then use it by applying it to the elements you want affected: <div class="scroller" scroll-fade></div>

If you need something more complex, you could always build a Shared Module where you would create reusable components, without repeating the code - which you could then transform into a library and share back with the community.

Theres an answer here on StackOverflow that explains how to.