Angular automatic lazy loading directive (using loading="lazy" if supported)

lazy.directive.ts

import { AfterViewInit, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: 'img',
})
export class LazyDirective extends Directive implements AfterViewInit {
  constructor(private elementRef: ElementRef<HTMLImageElement>) {
    super();
  }

  ngAfterViewInit(): void {
    const img = this.elementRef.nativeElement;
    if ('loading' in HTMLImageElement.prototype) {
      img.setAttribute('loading', 'lazy');
    }
  }
}