34 lines
908 B
TypeScript
34 lines
908 B
TypeScript
|
import { Directive, Output, EventEmitter, ElementRef, OnDestroy } from '@angular/core';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* detects changes in DOM and emits a signal on changes.
|
||
|
|
*
|
||
|
|
* @example (appDomChange)="onChange($event)"
|
||
|
|
*/
|
||
|
|
@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: MutationRecord[]) => {
|
||
|
|
mutations.forEach((mutation: MutationRecord) => this.domChange.emit(mutation));
|
||
|
|
});
|
||
|
|
|
||
|
|
this.changes.observe(element, {
|
||
|
|
attributes: true,
|
||
|
|
childList: true,
|
||
|
|
characterData: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnDestroy(): void {
|
||
|
|
this.changes.disconnect();
|
||
|
|
}
|
||
|
|
}
|