Struggling to implement best practices for: Editor.

[vitorioParticipant]

How do I bind jqxEditor content to an Angular form control for two-way data binding?

[adminKeymaster]

Hi vitorio,

This can be achieved by using the following:

<h3>jqxEditor Angular ngModel Demo</h3>

<jqxEditor
  [(ngModel)]="editorContent"
  [height]="300"
  [width]="'100%'"
></jqxEditor>

<br />

<button (click)="onSubmit()">Log Content</button>

<p><strong>Live bound content:</strong></p>
<div [innerHTML]="editorContent"></div>

and app.component.ts like this:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  editorContent: string = '<p>Hello from jqxEditor!</p>';

  onSubmit() {
    console.log('Editor content:', this.editorContent);
  }
}

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts