[Feature] - interested in a classMutationSignal?

[sp90]

I just wanted to know if you had any interest in a classMutationSignal that basically returns the current classes of the element passed to it.

Just before i start making all the tests for it etc

@Component({
  selector: 'sh-datepicker',
  imports: [],
  template: ``
})
export class ExampleComponent {
  #selfRef = inject(ElementRef);

  currentClassList = classMutationSignal(this.#selfRef.nativeElement);
  someEffect = effect(() => {
    const _ = this.currentClasses();
  
    // Some action on class change
  });
}

import { DestroyRef, inject, signal, Signal, WritableSignal } from '@angular/core';

export function classMutationSignal(element: HTMLElement): Signal<string> {
  const classListSignal: WritableSignal<string> = signal(element.className);
  const destroyRef = inject(DestroyRef);

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        const target = mutation.target as HTMLElement;
        classListSignal.set(target.className);
      }
    }
  });

  observer.observe(element, { attributes: true });
  destroyRef.onDestroy(() => observer.disconnect());

  return classListSignal.asReadonly();
}

[sp90]

If this should not result in a compile error on ssr/ssg it needs to check if typeof MutationObserver are !== undefined

[jdegand]

MutationObserver fires on any attribute change if you’re using { attributes: true } vs { attributes: true, attributeFilter: ['class'] }, which leads me to the idea that generalizing the signal to observe any attribute might open up powerful new possibilities for dynamic UI behavior and accessibility patterns. Something like:

export function attributeMutationSignal<T = string | null>(
  element: HTMLElement,
  attributeName: string,
  transform?: (value: string | null) => T
): Signal<T> {
  const destroyRef = inject(DestroyRef);
  const getValue = () => transform ? transform(element.getAttribute(attributeName)) : element.getAttribute(attributeName) as T;
  const attrSignal: WritableSignal<T> = signal(getValue());

  if (typeof MutationObserver === 'undefined') {
    return signal(transform ? transform(null) : null as T);
  }

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
        attrSignal.set(getValue());
      }
    }
  });

  observer.observe(element, {
    attributes: true,
    attributeFilter: [attributeName],
  });

  destroyRef.onDestroy(() => observer.disconnect());

  return attrSignal.asReadonly();
}

I hope you get more feedback, but this repo seems to be neglected at the moment.

[endlacer]

this looks pretty good, but i think it needs a optional Injector as argument.
Since this utility is working on elements, they often do not exist by the time of the injectionContext

[jdegand]

import { inject, Injector, DestroyRef } from '@angular/core';
import { signal, WritableSignal, Signal } from '@angular/core';

/**
 * Creates a reactive signal that reflects the value of a specific attribute on a DOM element.
 * Automatically updates when the attribute changes via MutationObserver.
 *
 * @template T - The type of the signal value, defaults to string | null.
 * @param element - The target HTMLElement to observe.
 * @param attributeName - The name of the attribute to track.
 * @param transform - Optional transform function to convert the attribute value.
 * @param injector - Optional Angular Injector for resolving DestroyRef outside injection context.
 * @returns A readonly Signal<T> that updates when the attribute changes.
 */
export function attributeMutationSignal<T = string | null>(
  element: HTMLElement,
  attributeName: string,
  transform?: (value: string | null) => T,
  injector?: Injector
): Signal<T> {
  // SSR or unsupported environment fallback
  if (typeof window === 'undefined' || typeof MutationObserver === 'undefined') {
    const fallbackValue = transform ? transform(null) : null as T;
    return signal(fallbackValue).asReadonly();
  }

  // Safely resolve DestroyRef from injector or injection context
  let destroyRef: DestroyRef | null = null;
  try {
    destroyRef = injector?.get(DestroyRef, null) ?? inject(DestroyRef);
  } catch {
    // No injection context available
    console.warn(
      'attributeMutationSignal: DestroyRef could not be resolved. Observer will not auto-disconnect.'
    );
  }

  // Helper to get transformed attribute value
  const getValue = (): T => {
    const raw = element.getAttribute(attributeName);
    return transform?.(raw) ?? (raw as T);
  };

  const attrSignal: WritableSignal<T> = signal(getValue());

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
        attrSignal.set(getValue());
      }
    }
  });

  observer.observe(element, {
    attributes: true,
    attributeFilter: [attributeName],
  });

  // Clean up observer when component is destroyed
  destroyRef?.onDestroy(() => observer.disconnect());

  return attrSignal.asReadonly();
}

[eneajaho]

Hi
This function now has too many params, so converting that to be a single object where we can pass all the needed things would be better. What do you think?

This would give us the opportunity to make the passing of the element optional -> meaning the user won't have to pass the elementRef as we can take the current element ref by default (we inject as optional, and if it doesn't exist we throw an error ofc) .

[endlacer]

you mean kinda like this?

  const element =
    options.element ??
    options.injector?.get(ElementRef, null as ElementRef<Element> | null)?.nativeElement ??
    inject(ElementRef, { optional: true })?.nativeElement;

But attributeNameshould not be part of these options, should it?

[sp90]

I personally prefer to have things not do many things. I know that classes are by nature attributes but angulars own implementation does also disitict the two I have just gone with this for my usecase.

import { DestroyRef, ElementRef, inject, signal, Signal, WritableSignal } from '@angular/core';

export function classMutationSignal(_element: HTMLElement | null = null): Signal<string> {
  const element = _element ?? (inject(ElementRef).nativeElement as HTMLElement);

  if (!element) return signal('');

  const classListSignal: WritableSignal<string> = signal(element.className);

  if (typeof MutationObserver === 'undefined') return classListSignal.asReadonly();

  const destroyRef = inject(DestroyRef);
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        const target = mutation.target as HTMLElement;
        classListSignal.set(target.className);
      }
    }
  });

  observer.observe(element, { attributes: true, attributeFilter: ['class'] });
  destroyRef.onDestroy(() => observer.disconnect());

  return classListSignal.asReadonly();
}