Angular directive to disable browser autofill on input forms (Tested Angular 18)

disable-autofill-input.directive.ts

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

  @Directive({
      selector: '[DisableAutofillInput]',
  })
  export class DisableAutofillInputDirective implements AfterViewInit {
      constructor(
          private el: ElementRef,
          private renderer: Renderer2,
      ) {}

      ngAfterViewInit(): void {
          // Set readonly secara default saat direktif diinisialisasi
          this.renderer.setAttribute(this.el.nativeElement, 'readonly', 'true');
      }

      // Event listener saat elemen menerima focus
      @HostListener('focus')
      onFocus(): void {
          this.renderer.removeAttribute(this.el.nativeElement, 'readonly');
      }

      // Event listener saat elemen kehilangan focus
      @HostListener('blur')
      onBlur(): void {
          this.renderer.setAttribute(this.el.nativeElement, 'readonly', 'true');
      }
  }

Follow the Article https://www.kang-cahya.com/2024/11/tips-angular-cara-mengatasi-autofill.html