OpenSlides/client/src/app/shared/directives/dom-change.directive.ts
2018-08-29 13:57:43 +02:00

34 lines
922 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();
public 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
});
}
public ngOnDestroy(): void {
this.changes.disconnect();
}
}