iframe resizer directive for Angular 4 (No CORS)

iframeResizer.directive.ts

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

@Directive({
  selector: '[iframeResize]',
})
export class IframeResizeDirective implements OnInit, OnDestroy {
  private listener: () => void;
  private observer: MutationObserver;

  get element() {
    return this.elementRef.nativeElement;
  }

  get contentHeight() {
    return this.element.contentDocument.body.scrollHeight;
  }

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

  ngOnInit() {
    this.listener = this.renderer.listen(this.element, 'load', () => {
      this.setFrameHeight(this.contentHeight);

      this.observer = new MutationObserver((mutations) => {
        this.setFrameHeight(this.contentHeight);
      });

      this.observer.observe(this.element.contentDocument.body, {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true
      });
    });
  }
  
    setFrameHeight(height: number) {
    this.renderer.setStyle(
      this.element,
      'height',
      `${height}px`
    );
  }

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

Thanks man for sharing this directive.