Angular Style Anchors on DOM Change Directive

ngStyleAnchorsOnDomChangeDirective.html

<div
     [myStyleAnchors]
     [innerHtml]="{{ someSafeHtml }}">
</div>

ngStyleAnchorsOnDomChangeDirective.spec.ts

const renderer = { addClass: (element: any, selector: string) => {} };
const addClassSpy = spyOn(renderer, 'addClass');
const querySelectorSpy = spyOn(el.nativeElement, 'querySelectorAll').and.callThrough();
const mockMutationObserver = jasmine.createSpyObj('mo', ['observe', 'disconnect']);
const directive = new ContentAnchorsDirective(el, renderer as Renderer2);
directive['observer'] = mockMutationObserver;

ngStyleAnchorsOnDomChangeDirective.ts

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

@Directive({
	selector: '[myStyleAnchors]'
})
export class StyleAnchorsDirective implements AfterViewInit, OnDestroy {
	private processing = false;
	private observer = new MutationObserver(() => this.styleAnchors());

	constructor(private el: ElementRef, private renderer: Renderer2) {}

	ngAfterViewInit(): void {
		this.styleAnchors();
		this.registerListenerForDomChanges();
	}

	ngOnDestroy() {
		this.observer.disconnect();
	}

	private styleAnchors() {
		if (!this.processing) {
			this.processing = true;
			const anchors = this.el.nativeElement.querySelectorAll('a');
			anchors.forEach(a => this.renderer.addClass(a, 'my-cool-class'));
			this.processing = false;
		}
	}

	private registerListenerForDomChanges() {
		const attributes = false;
		const childList = true;
		const subtree = true;
		this.observer.observe(this.el.nativeElement, { attributes, childList, subtree });
	}
}