LazyImgDirective.ts

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

@Directive({ selector: 'img' })
export class LazyImgDirective {
  constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
    const supports = 'loading' in HTMLImageElement.prototype;

    if (supports) {
      nativeElement.setAttribute('loading', 'lazy');
    }
  }
}

Hi, how to use the lazy loading directive in html

@ravivit9 the directive will do the work for you if you have it declared in your app.module.ts
@NetanelBasal Loved the idea, but I believe renderer2 usage is preferred

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

@Directive(
  { selector: 'img' }
)
export class LazyImageLoadingDirective
{
  constructor(private renderer:Renderer2, private element:ElementRef<HTMLImageElement>) {
    if ("loading" in HTMLImageElement.prototype) {
      this.renderer.setAttribute(this.element.nativeElement, "loading", "lazy");
    }
  }

}