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();
    }
}