SEB Magic Iframe
Install with npm
npm install @sebgroup/ng-magic-iframe --save
Add to app.modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgMagicIframeModule } from '@sebgroup/ng-magic-iframe';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgMagicIframeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Allow synthetic default imports
If you run into the following error: @types/element-resize-detector/index"' has no default export
you need to allow synthetic default imports as the type definitions for element-resize-detector, which this library depends on, has no default export declared. In tsconfig.json
in your root project folder, set allowSyntheticDefaultImports
to true:
{
"compileOnSave": false,
"compilerOptions": {
"allowSyntheticDefaultImports" : true,
...
}
Usage
Basic
<seb-ng-magic-iframe [source]="'/assets/first-page.html'"></seb-ng-magic-iframe>
Advanced
<seb-ng-magic-iframe [source]="'/assets/first-page.html'"
[styles]="'body { background: white; }'"
[styleUrls]="['/assets/css/external-stylesheet.css', '/assets/css/fonts.css']"
[autoResize]="false"
[resizeDebounceMillis]="0"
(iframeEvent)="foo($event)">
<!-- PLACEHOLDER FOR LOADING CONTENT -->
</seb-ng-magic-iframe>
Configuration and options
@Inputs
@Input | Description | Default |
---|---|---|
source | Path to iframe content source. | n/a |
styles | Apply/inject inline styles to the iframe (Optional). | n/a |
styleUrls | Add one or more stylesheets to the iframe, note that the iframe won't be visible until they've loaded (Optional). | n/a |
autoResize | Auto resize the iframe when the inner content changes height (Optional). | true |
resizeDebounceMillis | Debounce time in milliseconds for resize event to prevent race condition (Optional). | 50 |
@Outputs
@Output | Description |
---|---|
iframeEvent | Listen for state changes in iframe, see list of events below. |
Iframe events
@Input | Description |
---|---|
iframe-click | Event emitted when element inside iframe has been clicked. |
iframe-keyup | Event emitted when keyup event emitted inside iframe. |
iframe-unloaded | Event emitted when iframe triggers unload event (url in iframe changes). |
iframe-styles-added | Emitted when styles have been added. |
iframe-stylesheet-load | Emitted when external stylesheets start loading. |
iframe-stylesheet-loaded | Emitted when external stylesheets have finished loading. |
iframe-all-stylesheets-loaded | Emitted when all external stylesheets have finished loading (only emitted if more than one external stylesheets). |
iframe-loaded | Emitted when iframe has finished loading (including optional styles and/or stylesheets). |
iframe-loaded-with-errors | Emitted when iframe has encountered errors after loading (usually related to CORS and inability to access iframe content). |
iframe-resized | Emitted when the iframe changes size. |
Custom content loader
SEB Magic iframe uses content projection together with ng-content to show custom content while the iframe is loading. Simply add your own component or markup like this:
<seb-ng-magic-iframe [source]="'/assets/first-page.html'">
<div class="skeleton-loader"></div> <!-- replace with your own code -->
</seb-ng-magic-iframe>
Run locally
- Clone the repository
- Run
npm install
- Run
npm start
and navigate tohttp://localhost:4200/
. The app will automatically reload if you change any of the source files.