Added a new property that allows disabling the two-way data binding m…

…echanism in the CKEditor component.

src/app/demo-form/demo-form.component.html

@@ -16,18 +16,30 @@ <h3>User profile form</h3>
 	<label for="description">Description</label>
 	<ckeditor
 		[(ngModel)]="model.description"
+		[disableTwoWayDataBinding]="shouldDisableTwoWayDataBinding"
 		[editor]="Editor"
+		(ready)="onReady($event)"
 		id="description"
 		name="description">
 	</ckeditor>
 
 	<p *ngIf="description && description.dirty" class="alert">Description is "dirty".</p>
 	<p *ngIf="description && description.touched" class="alert">Description has been "touched".</p>
 
-	<p><button type="reset" (click)="reset()">Reset form</button></p>
-	<p><button type="submit">Submit this form</button> <em>(Open the console first)</em></p>
+	<p>
+		<button type="button" (click)="toggleDisableTwoWayDataBinding()">{{ shouldDisableTwoWayDataBinding ? 'Enable' : 'Disable' }} two-way data binding</button>
+		<em>Two-way data binding is {{ shouldDisableTwoWayDataBinding ? 'disabled' : 'enabled' }}.</em>
+	</p>
+	<p>
+		<button type="reset" (click)="reset()">Reset form</button>
+	</p>
+	<p>
+		<button type="submit">Submit this form</button> <em>(Open the console first)</em>
+	</p>
 </form>
 
+
+
 <h3>Editor data preview (readable and writable)</h3>
 <p>
 	Note that it's only a prove of concept of using the `ngModel`.

src/app/demo-form/demo-form.component.ts

@@ -26,20 +26,35 @@ export class DemoFormComponent implements AfterViewInit {
 		surname: 'Doe',
 		description: '<p>A <b>really</b> nice fellow.</p>'
 	};
-
 	public formDataPreview?: string;
+	public shouldDisableTwoWayDataBinding = false;
+
+	protected editorInstance: typeof ClassicEditor;
 
 	public get description(): AbstractControl {
 		return this.demoForm!.controls.description;
 	}
 
+	public toggleDisableTwoWayDataBinding(): void {
+		this.shouldDisableTwoWayDataBinding = !this.shouldDisableTwoWayDataBinding;
+	}
+
 	public ngAfterViewInit(): void {
 		this.demoForm!.control.valueChanges.subscribe( values => {
 			this.formDataPreview = JSON.stringify( values );
 		} );
 	}
 
+	public onReady( editor: typeof ClassicEditor ): void {
+		this.editorInstance = editor;
+	}
+
 	public onSubmit(): void {
+		// Read editor's data only when two-way data binding is disabled
+		if ( this.shouldDisableTwoWayDataBinding ) {
+			this.model.description = this.editorInstance.getData();
+		}
+
 		console.log( 'Form submit, model', this.model );
 	}
 

src/ckeditor/ckeditor.component.ts

@@ -102,6 +102,16 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	 */
 	@Input() public watchdog?: CKEditor5.ContextWatchdog;
 
+	/**
+	 * Allows disabling the two-way data binding mechanism. It can boosts performance for large documents if set to `true`.
+	 *
+	 * When a component is connected using the [(ngModel)] or [formControl] directives then all data will be never synchronized.
+	 *
+	 * An integrator must call `editor.getData()` manually once the application needs the editor's data.
+	 * An editor instance can be received in the `ready()` callback.
+	 */
+	@Input() public disableTwoWayDataBinding = false;
+
 	/**
 	 * When set `true`, the editor becomes read-only.
 	 * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#member-isReadOnly
@@ -411,6 +421,10 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 
 		modelDocument.on( 'change:data', ( evt: CKEditor5.EventInfo<'change:data'> ) => {
 			this.ngZone.run( () => {
+				if ( this.disableTwoWayDataBinding ) {
+					return;
+				}
+
 				if ( this.cvaOnChange && !this.isEditorSettingData ) {
 					const data = editor.getData();