Angular

This guide explains how to create an Angular Directive for iframe-resizer using the Framework API.

Install Framework API

Install the core iframe-resizer Framework API with the following command.

npm

npm install @iframe-resizer/core --save

pnpm

pnpm add @iframe-resizer/core

Yarn

yarn add @iframe-resizer/core

Create Angular Directive

Create the following directive, which exposes the full iframe-resizer feature set.

iframe-resizer-directive.ts

import {
  Directive,
  EventEmitter,
  Input,
  Output,
  ElementRef,
} from "@angular/core"

import connectResizer from "@iframe-resizer/core"

export type iframeResizerObject = {
  moveToAnchor: (anchor: string) => void
  resize: () => void
  sendMessage: (message: string, targetOrigin?: string) => void
}

type iframeResizerObjectPrivateMethods = {
  disconnect: () => void
}

type iframeResizerObjectPrivate = iframeResizerObject &
  iframeResizerObjectPrivateMethods

export interface iframeResizerElement extends HTMLIFrameElement {
  iFrameResizer: iframeResizerObject
}

export type iframeResizerOptions = {
  bodyBackground?: string | null
  bodyMargin?: string | number | null
  bodyPadding?: string | number | null
  checkOrigin?: boolean | string[]
  direction?: "vertical" | "horizontal" | "none"
  inPageLinks?: boolean
  license: string
  offsetSize?: number
  scrolling?: boolean | "omit"
  tolerance?: number
  warningTimeout?: number
}

@Directive({
  selector: "[iframe-resizer]",
  standalone: true,
})
export class IframeResizerDirective {
  private resizer?: iframeResizerObjectPrivate

  @Output() onReady = new EventEmitter<iframeResizerElement>()
  @Output() onClose = new EventEmitter<iframeResizerElement>()
  @Output() onMessage = new EventEmitter<{
    iframe: iframeResizerElement
    message: string
  }>()
  @Output() onMouseEnter = new EventEmitter<{
    iframe: iframeResizerElement
    height: number
    width: number
    type: string
  }>()
  @Output() onMouseLeave = new EventEmitter<{
    iframe: iframeResizerElement
    height: number
    width: number
    type: string
  }>()
  @Output() onResized = new EventEmitter<{
    iframe: iframeResizerElement
    height: number
    width: number
    type: string
  }>()
  @Output() onScroll = new EventEmitter<{
    iframe: iframeResizerElement
    top: number
    left: number
  }>()

  get iframeResizer(): iframeResizerObject | undefined {
    return this.resizer
  }

  @Input() options: iframeResizerOptions = {
    license: "",
  }

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {}

  ngAfterViewInit(): void {
    this.resizer = connectResizer({
      ...this.options,
      waitForLoad: true,

      onClose: (iframeID: any) => {
        console.warn(
          `[iframe-resizer/angular][${this.elementRef.nativeElement?.id}] Close event ignored, to remove the iframe update your Angular component.`
        )
        return false
      },

      onMessage: (event: { iframe: iframeResizerElement message: string }) =>
        this.onMessage.next(event),

      onMouseEnter: (event: {
        iframe: iframeResizerElement
        height: number
        width: number
        type: string
      }) => this.onMouseEnter.next(event),

      onMouseLeave: (event: {
        iframe: iframeResizerElement
        height: number
        width: number
        type: string
      }) => this.onMouseLeave.next(event),

      onReady: (iframe: iframeResizerElement) => this.onReady.next(iframe),

      onResized: (event: {
        iframe: iframeResizerElement
        height: number
        width: number
        type: string
      }) => this.onResized.next(event),

      onScroll: (event: {
        iframe: iframeResizerElement
        top: number
        left: number
      }) => this.onScroll.next(event),
    })(this.elementRef.nativeElement)
  }

  ngOnDestroy() {
    this.resizer?.disconnect()
  }

  // parent methods
  public resize() {
    this.resizer?.resize()
  }
  public moveToAnchor(anchor: string) {
    this.resizer?.moveToAnchor(anchor)
  }

  public sendMessage(message: string, targetOrigin?: string) {
    this.resizer?.sendMessage(message, targetOrigin)
  }
}

Setup on Parent Page

You can then include it on your parent page as follows, using the options and events as detailed in the Parent Page API.

HTML

parent-page.html

 <iframe
  id="myIframe"
  iframe-resizer
  [src]="src"
  [options]="{ license: 'xxxx' }"

  (onReady)="onReady($event)"
  (onMessage)="onMessage($event)"
  (onMouseEnter)="onMouseEnter($event)"
  (onMouseLeave)="onMouseLeave($event)"
  (onResized)="onResized($event)"
  (onScroll)="onScroll($event)"
  ></iframe>

<style>
iframe {
  width: 100%;
  height: 100vh;
}
</style>

TypeScript

parent-page.ts

import { Component, inject } from "@angular/core"
import { DOCUMENT } from "@angular/common"
import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser"

import {
  IframeResizerDirective,
  iframeResizerElement,
} from "iframe-resizer-directive"

@Component({
  selector: "app-parent",
  standalone: true,
  imports: [IframeResizerDirective],
  templateUrl: "./parent.page.html",
  styleUrl: "./parent.page.css",
})
export class ParentPage {
  sanitizer = inject(DomSanitizer)
  doc = inject(DOCUMENT)

  // @ViewChild(IframeResizerDirective) ifrd:IframeResizerDirective|undefined;

  src: SafeResourceUrl =
    this.sanitizer.bypassSecurityTrustResourceUrl("/child")

  visible = true;

  constructor() {}

  onReady(resizer: iframeResizerElement) {
    console.log("ParentPage.onReady: ", resizer)
  }

  onMessage($event: { iframe: iframeResizerElement; message: string }) {
    console.log("ParentPage.onMessage: ", $event)
    $event.iframe.iFrameResizer.sendMessage("Reply back")
  }

  onMouseEnter($event: {
    iframe: iframeResizerElement;
    height: number;
    width: number;
    type: string;
  }) {
    console.log("ParentPage.onMouseEnter: ", $event)
  }

  onMouseLeave($event: {
    iframe: iframeResizerElement;
    height: number;
    width: number;
    type: string;
  }) {
    console.log("ParentPage.onMouseLeave: ", $event)
  }

  onResized($event: {
    iframe: iframeResizerElement;
    height: number;
    width: number;
    type: string;
  }) {
    console.log("ParentPage.onResized: ", $event)
  }

  onScroll($event: {
    iframe: iframeResizerElement;
    top: number;
    left: number;
  }) {
    console.log("ParentPage.onScroll: ", $event)
  }

  // parent methods
  resize() {
    let iframe = this.doc.getElementById("theIframe") as iframeResizerElement;
    iframe?.iFrameResizer.resize()
  }

  moveToAnchor(anchor: string) {
    let iframe = this.doc.getElementById("theIframe") as iframeResizerElement;
    iframe?.iFrameResizer.moveToAnchor(anchor)
  }

  sendMessage(message: string, targetOrigin?: string) {
    let iframe = this.doc.getElementById("theIframe") as iframeResizerElement;
    iframe.iFrameResizer.sendMessage(message)
  }
}

• Thanks to Bjørn Håkon for this example.

Setting the initial height of the iframe to 100vh makes the loading in of the iframe appear smoother to the user, as they will only see the content below the iframe once it has completed loading and undergone it’s initial sizing.

Commercial licence

To use iframe-resizer in a closed source website or application, you need to purchase a one time license key. See the pricing page for details.

Open source licence

For non-comercial open source projects, iframe-resizer is free to use under the Gnu Public License. To confirm that you are using it in a compatable project set the license to GPLv3.

Child page

You will then need to install the @iframe-resizer/child package on every page in the iframe.

Once everything is setup, keep an eye on the browser console, as iframe-resizer will warn about any potential issues it detects and provide advice on how to fix them. For more details on using iframe-resizer see the Advanced Setup and Trouble Shooting sections of this guide.

Was this page useful?

Send

Thanks for your feedback