Introduce the dataChangeEventDisabled property

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

@@ -18,6 +18,7 @@ <h3>User profile form</h3>
 		[(ngModel)]="model.description"
 		[editor]="Editor"
 		id="description"
+		[disableOnChange]="disabledOnChangeEvent"
 		name="description">
 	</ckeditor>
 

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

@@ -16,13 +16,15 @@ export class DemoFormComponent implements AfterViewInit {
 	@ViewChild( 'demoForm', { static: true } ) public demoForm?: NgForm;
 
 	public Editor = ClassicEditorBuild;
+
 	public model = {
 		name: 'John',
 		surname: 'Doe',
 		description: '<p>A <b>really</b> nice fellow.</p>'
 	};
 
 	public formDataPreview?: string;
+	public disabledOnChangeEvent: boolean = false;
 
 	public get description() {
 		return this.demoForm!.controls.description;
@@ -35,6 +37,9 @@ export class DemoFormComponent implements AfterViewInit {
 	}
 
 	public onSubmit() {
+		if ( this.disabledOnChangeEvent ) {
+			this.model.description = this.Editor.getData();
+		}
 		console.log( 'Form submit, model', this.model );
 	}
 

src/ckeditor/ckeditor.component.ts

@@ -84,6 +84,11 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 		return this.initialIsDisabled;
 	}
 
+	/**
+	 * True to disable on-change event which boosts performance with large texts, use Editor.getData() to get the latest data.
+	 */
+	@Input() public disableOnChange: boolean = false;
+
 	/**
 	 * Fires when the editor is ready. It corresponds with the `editor#ready`
 	 * https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready
@@ -263,17 +268,18 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 		const modelDocument = editor.model.document;
 		const viewDocument = editor.editing.view.document;
 
-		modelDocument.on( 'change:data', ( evt: CKEditor5.EventInfo<'change:data'> ) => {
-			this.ngZone.run( () => {
-				if ( this.cvaOnChange ) {
-					const data = editor.getData();
-
-					this.cvaOnChange( data );
-				}
+		if ( !this.disableOnChange ) {
+			modelDocument.on( 'change:data', ( evt: CKEditor5.EventInfo<'change:data'> ) => {
+				this.ngZone.run( () => {
+					if ( this.cvaOnChange ) {
+						const data = editor.getData();
+						this.cvaOnChange( data );
+					}
 
-				this.change.emit( { event: evt, editor } );
+					this.change.emit( { event: evt, editor } );
+				} );
 			} );
-		} );
+		}
 
 		viewDocument.on( 'focus', ( evt: CKEditor5.EventInfo<'focus'> ) => {
 			this.ngZone.run( () => {
@@ -287,6 +293,12 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 					this.cvaOnTouched();
 				}
 
+				// if we disable onChange event, then we have to push changes to ngModel when leaving the text editor
+				if ( this.disableOnChange && this.cvaOnChange ) {
+					const data = editor.getData();
+					this.cvaOnChange( data );
+				}
+
 				this.blur.emit( { event: evt, editor } );
 			} );
 		} );