Angular 2: Capturing scroll events from the parent element within a Directive

Question

Angular 2: Capturing scroll events from the parent element within a Directive

One of the challenges I encountered is with a directive called [appInvalidField] that functions like a custom tooltip for validation purposes. To ensure it appears above everything else within dialogs, I attach it to the body and position it near the relevant field.

The issue arises when scrolling comes into play. I realized that I need to dynamically adjust the tooltip's position based on scroll events triggered by the form. The tricky part is figuring out how to achieve this adjustment within the directive file without altering the existing HTML structure. Below is an example of how the directive is used in a form:

<form #ngForm="ngForm" [formGroup]="form" (ngSubmit)="onSave()">
  <div class="form--edit">
    <div class="form__group p-grid">
         <label class="p-col-12 form__label">{{'substance.IUPACName-title' | translate}}</label>
         <div appInvalidField="names">
               <span *appInvalidFieldType="'required'" [translate]="'substance.IUPACName-field-required'"></span>
                <span *appInvalidFieldType="'maxlength'"
                                [translate]="'substance.IUPACName-field-maxlength'"></span>
          </div>
          <input class="p-col" pInputText [maxLength]="formService.maxLength" appAutofocus  formControlName="names" />
    </div>
  </div>
</form>

angular typescript

Answer 1

Answer №1

Presented here is a custom directive that tracks all scroll events from the current position upwards:

@Directive({
    selector: '[allParentsScroll]',
})
export class AllParentsScrollDirective implements OnInit {
    @Output('allParentsScroll')
    readonly allParentsScroll$: Observable<Event>;

    private readonly ready$ = new Subject<void>();

    constructor(
        @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
    ) {
        const eventTargets: EventTarget[] = [window, nativeElement];

        while (nativeElement.parentElement) {
            nativeElement = nativeElement.parentElement;
            eventTargets.push(nativeElement);
        }

        const allScroll$ = merge<Event>(
            ...eventTargets.map<Observable<Event>>(element => fromEvent(element, 'scroll')),
        );

        this.allParentsScroll$ = this.ready$.pipe(swithMapTo(allScroll$));
    }

    ngOnInit() {
        // Initialize the listener once everything is set up
        this.ready$.next();
    }
}

In essence, this directive traverses the DOM structure upwards, attaching scroll event listeners to each container and consolidating them into a single stream. I utilize it for handling similar scenarios, however there's a known limitation where querying any DOM positioning information during fast scrolling can cause delayed updates. To mitigate this, one solution is to position the element absolutely instead of fixed, as this approach minimizes recalculations triggered by body scrolls in most instances.

Answer 2

Presented here is a custom directive that tracks all scroll events from the current position upwards:

@Directive({
    selector: '[allParentsScroll]',
})
export class AllParentsScrollDirective implements OnInit {
    @Output('allParentsScroll')
    readonly allParentsScroll$: Observable<Event>;

    private readonly ready$ = new Subject<void>();

    constructor(
        @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
    ) {
        const eventTargets: EventTarget[] = [window, nativeElement];

        while (nativeElement.parentElement) {
            nativeElement = nativeElement.parentElement;
            eventTargets.push(nativeElement);
        }

        const allScroll$ = merge<Event>(
            ...eventTargets.map<Observable<Event>>(element => fromEvent(element, 'scroll')),
        );

        this.allParentsScroll$ = this.ready$.pipe(swithMapTo(allScroll$));
    }

    ngOnInit() {
        // Initialize the listener once everything is set up
        this.ready$.next();
    }
}

In essence, this directive traverses the DOM structure upwards, attaching scroll event listeners to each container and consolidating them into a single stream. I utilize it for handling similar scenarios, however there's a known limitation where querying any DOM positioning information during fast scrolling can cause delayed updates. To mitigate this, one solution is to position the element absolutely instead of fixed, as this approach minimizes recalculations triggered by body scrolls in most instances.

Answer 3

Answer №2

For a more sophisticated approach, consider utilizing the IntersectionObserver, which is demonstrated in this insightful post: How to check if element is visible after scrolling?

To implement this with a directive, you can create something similar to the following:

@Directive({
  selector: '[fixedscroll]'
})
export class FixedscrollDirective{
@Input() windowOnly = false;
constructor(
    @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
) {
    var observer = new IntersectionObserver(onIntersection, {
      root: null,   // default is the viewport
      threshold: .5 // percentage of target's visible area. Triggers "onIntersection"
    })

    // callback is called on intersection change
    function onIntersection(entries, opts){
      entries.forEach(entry =>
        entry.target.classList.toggle('visible', entry.isIntersecting)
      )
    }

    // Use the observer to observe an element
    observer.observe( nativeElement )
}
}

Answer 4

For a more sophisticated approach, consider utilizing the IntersectionObserver, which is demonstrated in this insightful post: How to check if element is visible after scrolling?

To implement this with a directive, you can create something similar to the following:

@Directive({
  selector: '[fixedscroll]'
})
export class FixedscrollDirective{
@Input() windowOnly = false;
constructor(
    @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
) {
    var observer = new IntersectionObserver(onIntersection, {
      root: null,   // default is the viewport
      threshold: .5 // percentage of target's visible area. Triggers "onIntersection"
    })

    // callback is called on intersection change
    function onIntersection(entries, opts){
      entries.forEach(entry =>
        entry.target.classList.toggle('visible', entry.isIntersecting)
      )
    }

    // Use the observer to observe an element
    observer.observe( nativeElement )
}
}

Angular 2: Capturing scroll events from the parent element within a Directive

Answer №1

Answer №2

Similar questions

Encountering a TS(2322) Error while Implementing Observables in Angular 12

How to connect a form component object with a parent object in Vue3 using v-model and the Options API?

Distilling the Essence of "Deity" in Handling Runtime Errors

Angular Tip: Display data in a dropdown using a select element

The NgZone reference error caused the prerendering to fail

Issue encountered while attempting to utilize a basic redux reducer to define a boolean value, regarding a mismatch in overrides

Error in Angular6: Why can't handleError read injected services?

Handling onChange events for several typescript <Select> elements

The favicon appears broken upon opening a new tab

Developing a custom camera system for a top-down RPG game using Javascript Canvas

Tips for eliminating Ref upon exiting the screen on React / React Native?

Using Angular 2 with Material 2 to create dynamic checkbox bindings

Navigating with hashtags in Angular2 and anchors does not change the page position

Extracting arrays from JSON in Angular: A step-by-step guide

Create a const assertion to combine all keys from an object into a union type

I'm encountering an error in TestCafe that says "TypeError: Cannot read properties of undefined (reading 'match')". Which specific segment of my code is causing this issue?

Utilizing handpicked information in Angular: A beginner's guide

Loading tabs dynamically in Angular 2 based on header click event

Test Failure: Attempt to access 'componentInstance' property on a non-existent value

Tips for presenting SVG symbols using Interpolation within Angular 7 from a JSON document