frontend/src/app/directives/dom-change.directive.ts

31 lines
782 B
TypeScript
Raw Normal View History

import {Directive, ElementRef, EventEmitter, OnDestroy, Output} from '@angular/core';
@Directive({
selector: '[appDomChange]'
})
export class DomChangeDirective implements OnDestroy {
private changes: MutationObserver;
@Output()
public domChange = new EventEmitter();
constructor(private elementRef: ElementRef) {
const element = this.elementRef.nativeElement;
this.changes = new MutationObserver((mutations) => {
mutations.forEach(mutation => this.domChange.emit(mutation));
});
this.changes.observe(element, {
attributes: true,
childList: true,
characterData: true,
subtree: true,
});
}
ngOnDestroy() {
this.changes.disconnect();
}
}