Smart.Editor iFrame Mode
JavaScriptJavaScriptAngularAngularVueVueReactReact

Editor for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { EditorComponent, EditorModule } from 'smart-webcomponents-angular/editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, EditorModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('editor', { read: EditorComponent, static: false }) editor!: EditorComponent;
}
<!-- app.component.html -->
<smart-editor #editor></smart-editor>

Use this.editor for API methods in this topic.

iFrame Editor

Smart.Editor's content section can be easily stylied or modifed via CSS or Javascript. However the Editor has an additional iframe mode which places the Editor's content inside an iframe which provides an isolated DOM that does not allow styles and scripts to leak in.

The iframe mode is not enabled by default. A property of type object called iframeSettings that configures the iframe mode with the following settings:

  • enabled - determines whether iframe mode is enabled or not.
  • attributes - an object that defines attributes for the iframe, for example: 
    attributes: {
    height: 500
}

    All native iframe attributes are supported.

  • resources - an object that determines what styles and scripts should be imported into the iframe's DOM. For example: 
      resources: {
      'style': {
          href: 'styles.css'
        },
        'script': {
            src: 'index.js',
            type: 'module'
        }
    }

    The href and src attributes should point to the file location and name.

    The type attribute determines whether the JS file should be loaded as a module or not.

For AI tooling

Developer Quick Reference

Topic: editor-iframe-mode   Component: Editor   Framework: Angular

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.