Directive to scroll into view. Showing the before and after using input signals

scroll-into-view-directive-before.directive.ts

import { isPlatformBrowser } from '@angular/common';
import {
  Directive,
  ElementRef,
  Inject,
  OnChanges,
  PLATFORM_ID,
  Renderer2,
  SimpleChanges,
  input,
} from '@angular/core';

function coerceBooleanProperty(value: any): boolean {
  return value !== null && `${value}` !== 'false';
}
@Directive({
  selector: '[appScrollIntoView]',
  standalone: true,
})
export class ScrollIntoViewDirective implements OnChanges {
  appScrollIntoView = input<boolean>();

  constructor(
    @Inject(PLATFORM_ID) private platformId: any,
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {}

  ngOnChanges(simpleChange: SimpleChanges) {
    if (isPlatformBrowser(this.platformId)) {
      if (coerceBooleanProperty(this.appScrollIntoView())) {
        setTimeout(() => {
          this.renderer.addClass(this.elementRef.nativeElement, 'just-added');
          (this.elementRef.nativeElement as HTMLInputElement).scrollIntoView({
            behavior: 'smooth',
            block: 'center',
          });
        }, 10);
      }
    }
  }
}

scroll-into-view-signal.directive.ts

import { isPlatformBrowser } from '@angular/common';
import {
  Directive,
  ElementRef,
  Inject,
  PLATFORM_ID,
  Renderer2,
  effect,
  input,
} from '@angular/core';

function coerceBooleanProperty(value: any): boolean {
  return value !== null && `${value}` !== 'false';
}
@Directive({
  selector: '[appScrollIntoView]',
  standalone: true,
})
export class ScrollIntoViewDirective {
  appScrollIntoView = input<boolean>();

  constructor(
    @Inject(PLATFORM_ID) private platformId: any,
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {
    effect(() => {
      if (isPlatformBrowser(this.platformId)) {
        if (coerceBooleanProperty(this.appScrollIntoView())) {
          this.renderer.addClass(this.elementRef.nativeElement, 'just-added');
          (this.elementRef.nativeElement as HTMLInputElement).scrollIntoView({
            behavior: 'smooth',
            block: 'center',
          });
        }
      }
    });
  }
}