Angular (original) (raw)
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 install @iframe-resizer/core --save
Create Angular Directive
Create the following directive, which exposes the full iframe-resizer feature set.
import {
Directive,
EventEmitter,
Input,
Output,
ElementRef,
} from "@angular/core"
// @ts-expect-error types declared below
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
log?: boolean | "collapsed" | "expanded"
offsetSize?: number
scrolling?: boolean | "omit"
tolerance?: number
warningTimeout?: number
onClose?(iframeId: string): void
onClosed?(iframeId: string): void
}
@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 andevents as detailed in the Parent Page API.
<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>
- 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.
Child page
You will then need to install the @iframe-resizer/childpackage 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 theAdvanced Setup and Trouble Shooting sections of this guide.