Basically I would like to flag a dom element with an @input value, i.e. 'aos'

<div aos>my</div>

And then for example do a console log whenever such div is within my viewport.

How can this be achieved? I assume using Angular's Scrolling Dispatcher, but how can I understand that such div is in the viewport?

Basically I would like to flag a dom element with an @input value, i.e. 'aos'

<div aos>my</div>

And then for example do a console log whenever such div is within my viewport.

How can this be achieved? I assume using Angular's Scrolling Dispatcher, but how can I understand that such div is in the viewport?

• javascript
• angular

Share Improve this question Follow edited Sep 30, 2020 at 3:26 Teabag2000 asked Sep 30, 2020 at 1:13 Teabag2000Teabag2000 11311 silver badge66 bronze badges 1

• I have opened a new thread to extend julianobrasil solution to turn this into an 'animate-on-scroll' (stackoverflow./questions/64130402/…) – Teabag2000 Commented Sep 30, 2020 at 3:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 17

LIVE DEMO

You can use an IntersectionObserver for doing that. It's a native browser API, not an Angular one. One approach is to build a directive that, when applied to any element will tell you that element is visible/hidden. You can check its API here.

Basically what you have to do in this directive is:

1. Inject the parent of the directive (ElemenRef)
2. Observe the parent using an IntersectionObserver

@Directive({selector: "[enterTheViewportNotifier]"})
export class EnterTheViewportNotifierDirective implements AfterViewInit, OnDestroy {
  @Output() visibilityChange = new EventEmitter<'VISIBLE' | 'HIDDEN'>();
  private _observer: IntersectionObserver;

  constructor(@Host() private _elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    const options = {root: null,rootMargin: "0px",threshold: 0.0};
    this._observer = new IntersectionObserver(this._callback, options);
    this._observer.observe(this._elementRef.nativeElement);
  }

  ngOnDestroy() {this._observer.disconnect();}

  private _callback = (entries, observer) => {
    entries.forEach(entry => 
        this.visibilityChange.emit(entry.isIntersecting ? 'VISIBLE' : 'HIDDEN'));
  };
}

And you can use it like this (_visibilityChangeHandler will be called with a message everytime the below div enters/leaves the viewport):

<div (visibilityChange)="_visibilityChangeHandler($event)"
     enterTheViewportNotifier>
</div>

Final note: it is possible to have an output with the same name of the selector, which could save you one attribute applied to the ponent, but I'm not sold on that idea yet :)