Guidelines for consuming this library in angular 2

[adaneam]

Could you please provide guidelines for using this library in angular 2 project created with CLI/Webpack.

[davidjbradshaw]

I'm React rather than Angular 2. If you get it working please let me know and I'll add something to the docs. I suggest asking StackOverflow.

[lucasnichele]

I need the same. Please help us.

[arminbaljic]

Maybe this will help you. First declare types in "typings.d.ts". Here is an example, please notice that I only added methods that I needed.

interface IFrameObject {
    close();
    resize();
}

interface IFrameResizerComponent {
    iFrameResizer: IFrameObject
}

declare const resizer: {
    iframeResizer(options: any, target: HTMLElement);
};

/* Modules */
declare module 'iframe-resizer' {
    export = resizer;
}

After that, you should create directive. Something like this.

import {AfterViewInit, Directive, ElementRef, OnDestroy} from '@angular/core';
import * as resizer from 'iframe-resizer';

@Directive({
    selector: 'iframe.thread-content'
})
export class IFrameResizerDirective implements AfterViewInit, OnDestroy {
    component: IFrameResizerComponent;

    constructor(public element: ElementRef) {
    }

    ngAfterViewInit() {
        this.component = resizer.iframeResizer({
            checkOrigin: false,
            heightCalculationMethod: 'documentElementOffset',
            log: false
        }, this.element.nativeElement);
    }

    ngOnDestroy(): void {
        if (this.component && this.component.iFrameResizer) {
            this.component.iFrameResizer.close();
        }
    }
}

Pay attention to tag and tag class, this is used as a selector in created directive.

<iframe #messageIframe
        class="thread-content"
        [srcdoc]="processedDocument"
        title="Thread Content"
        scrolling="no" frameborder="0"></iframe>

I know that I am late, but maybe someone will find this useful.

[gausie]

Does anyone have advice for consuming the contentWindow portion of it from angular2?

[davidjbradshaw]

@gausie I've not tried, but would expect it just to work. It's just a service running in the background on the page. If your using es6/TypeScript then I think you just need to import it.

If it is more complex than that then when you get the solution please share here.

[gausie]

Everything is working fine - had a little issue with tree-shaking but this works fine:

import { iframeResizerContentWindow } from 'iframe-resizer';

// This needs to be referenced so it isn't tree-shaken.
iframeResizerContentWindow; // tslint:disable-line no-unused-expression

[davidjbradshaw]

That sounds like a bug with tree-shaking. Might be worth reporting over at WebPack.

[davidjbradshaw]

It would be great if @arminbaljic or someone else in the Angular community would publish an Angular wrapper to this project, like we have with https://github.com/davidjbradshaw/iframe-resizer-react

[arminbaljic]

Hi, @davidjbradshaw I have created a repository for angular wrapper: https://github.com/arminbaljic/ngx-iframe-resizer. This week basic version should be completed and later I could add some examples. Anyone who wants to join me is welcome.

[arminbaljic]

I have created pull request for type definitions. After this is merged I will start working on the wrapper.

Update: Types are published to the @types scope on NPM, you can install them using:
npm install @types/iframe-resizer --save-dev

[alfupe]

@arminbaljic It would be great to see this wrapper working. I'm trying to make your directive working but I'm not able... Thanks!

[lasimone]

+1

[zvaryuga]

+2