Smart.Editor Auto Load/Save
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.

Editor Content State Handling

Smart.Editor's allows to automatically store the content to local storage. The autoSaveInterval property determines the interval between each save. The property accepts numeric values as miliseconds. The default interval value is set to 1000ms (1 second). The content is saved only while the Editor is focused.

The auto save feature is not enabled by default. The autoSave property enables/disabled the feature.

The auto load feature of the Editor allows the user to continue from where he left off after re-opening the page. The autoLoad property determines whether the Editor will automatically load the last saved state.

In order for both property to work the Editor should have an id set.

Methods

Additional methods are available for manually saving or loading the Editor:

  • saveState - saves the current state of the Editor to local storage.
  • loadState - this method takes one optional argument which represents a previously saved content of the Editor. If not provided, a local storage lookup for a previously saved state of the Editor will be performed.
  • clearState - clears any stored state of the Editor from Local storage. (Depending on the id of the Editor)
const editor = this.editor;

this.editor.saveState();
this.editor.loadState();
this.editor.clearState();
For AI tooling

Developer Quick Reference

Topic: editor-auto-save   Component: Editor   Framework: Angular

Main methods: saveState(), loadState(), clearState()

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.