from-event-pattern.component.ts

@Component({
    template: `
        <h1 #heading>Mutation {{text()}}</h1>
        <input type="text" [(ngModel)]="text">

        @if(mutations$) {
            <span>{{ mutations$ | async }}</span>
        }
    `,
})
export class MutationComponent implements AfterViewInit { 
    text = signal('');
    heading = viewChild.required<ElementRef<HTMLHeadingElement>>('heading');
    mutations$?: Observable<string>;

    ngAfterViewInit(): void {
        let observer: MutationObserver;
        this.mutations$ = fromEventPattern<MutationRecord[][]>(
            // create the observer and observe the element
            // when the Observable is subscribed to
            (handler) => {
                observer = new MutationObserver(handler);
                observer.observe(this.heading().nativeElement, {
                    subtree: true,
                    characterData: true,
                    characterDataOldValue: true,
                });
            },
            // disconnect when unsubscribed
            () => observer.disconnect(),
        ).pipe(
            map(([[mutations]]) => mutations.oldValue ?? ''),
        );
    }
}