Forms Support

You can use the Editor in Template-driven and Reactive forms.

Template-Driven Forms

The template-driven forms enable you to bind the Editor to the model by using the ngModel directive.

The following example demonstrates how to accomplish a two-way data binding by using ngModel.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <form #form="ngForm">
        <div class="example-config">
            Editor contents:
            <pre>
{{ content }}
            </pre>
        </div>
        <div class="example-wrapper">
            <kendo-editor [(ngModel)]="content" name="content" style="height: 350px;"></kendo-editor>
        </div>
    </form>
  `
})
export class AppComponent {
    public content = '<p>The <strong>quick</strong> <em>brown</em> fox jumps <u>over</u> the lazy dog</p>';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { EditorModule } from '@progress/kendo-angular-editor';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        EditorModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Reactive Forms

The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.

The following example demonstrates how to use the Editor in a reactive form with a primitive value binding.

import {
    FormGroup,
    FormControl
} from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="myForm">
        <div class="example-config">
            Editor contents:
            <pre>
{{ myForm.controls.editor.value }}
            </pre>
        </div>
        <div class="example-wrapper">
            <kendo-editor formControlName="editor" style="height: 350px;"></kendo-editor>
        </div>
    </form>
  `
})
export class AppComponent {
    public myForm: FormGroup = new FormGroup({
        editor: new FormControl('<p>The <strong>quick</strong> <em>brown</em> fox jumps <u>over</u> the lazy dog</p>')
    });
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EditorModule } from '@progress/kendo-angular-editor';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        EditorModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article