typescript 48 lines · 7 steps

An infinite-scroll directive in Angular

An Angular directive fires loadMore when its host element scrolls into view, using IntersectionObserver kept off the change-detection loop.

Explained by highlit

Angular Advanced intersectionobserver directives performance change-detection lifecycle-hooks

1import {
Directive,
ElementRef,
EventEmitter,
Input,
NgZone,
OnDestroy,
OnInit,
Output,
inject,
11} from '@angular/core';
12 
13@Directive({
selector: '[appInfiniteScroll]',
standalone: true,
16})
17export class InfiniteScrollDirective implements OnInit, OnDestroy {
@Input() rootMargin = '200px';
@Input() threshold = 0;
@Input() disabled = false;
21 
@Output() readonly loadMore = new EventEmitter<void>();
23 
private readonly host = inject(ElementRef<HTMLElement>);
private readonly zone = inject(NgZone);
private observer?: IntersectionObserver;
27 
ngOnInit(): void {
  this.zone.runOutsideAngular(() => {
    this.observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (!entry?.isIntersecting || this.disabled) {
          return;
        }
        this.zone.run(() => this.loadMore.emit());
      },
      { rootMargin: this.rootMargin, threshold: this.threshold },
    );
40 
    this.observer.observe(this.host.nativeElement);
  });
}
44 
ngOnDestroy(): void {
  this.observer?.disconnect();
}
48}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1IntersectionObserver detects visibility without scroll listeners or manual math.
2Running observers outside Angular's zone avoids change detection on every callback.
3Directives should disconnect observers in ngOnDestroy to prevent leaks.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';