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

Troubleshooting the lack of success in enhancing global scope within Typescript

Using TypeScript to define a constant array as a type

What is the best way to programmatically define the value for the MaterialUI grid size property using TypeScript?

Why is it that when I try to create a table using the "Create Table" statement, I keep getting an error saying "Near '(': syntax error"?

Mastering regular expressions in TypeScript

Definition of generic with recursive immutability

Display the concealed mat-option once all other options have been filtered out

Tips for incorporating state properties into a component

What is the best way to send an array of locationIds to the getLocationData service?

The Nestjs ClientMqtt now has the capability to publish both pattern and data to the broker, as opposed to just sending

Updating text inputs in Angular can be done more efficiently using Angular Update

Encountering issues with package resolution in VS Code while setting up a monorepo with yarn workspaces, Vite, React, and

Steps to refresh a variable when the SMS read plugin successfully completes

Mapping an HTTP object to a model

The updated version of Angular from 13 to 16 has implemented a new default value for primary colors

Instructions for implementing personalized horizontal and vertical scrolling within Angular 9

The background image causes the scrollbar to vanish

Creating a method in Angular that combines async/await functionality with Observables

What is the best way to invoke a method within the onSubmit function in Vuejs?

Guidance on showcasing the current day's weekday name through TypeScript