Skip to main content

DHTMLX RichText. Angular integration example

Demo of DHTMLX RichText integration with Angular using the official GitHub demo. Shows initialization and cleanup for an Angular-based DHTMLX RichText component. For a step-by-step setup guide, see the detailed Angular integration guide.

Try it online

View on GitHub - open the repository and click "Open in Codespaces" on the README page to launch a fully configured Angular app with DHTMLX RichText in seconds. No local setup required.

DHTMLX RichText integrates with Angular through a component that binds the container with @ViewChild and manages the widget in the Angular lifecycle hooks. The editor is created in ngOnInit and destroyed in ngOnDestroy, so it mounts and cleans up with the component.

The component reads its container element via @ViewChild("richtext_container") and creates a Richtext instance on nativeElement inside ngOnInit, passing the configuration and the starting value. When the component is destroyed, ngOnDestroy calls editor.destructor() to release the widget.

Solution overview​

To integrate DHTMLX RichText with Angular, follow the standard widget lifecycle pattern:

  1. Import the package and styles - import { Richtext } from "@dhx/trial-richtext" and its richtext.css.

  2. Bind the container with a static view query so it is available in ngOnInit:

    @ViewChild("richtext_container", { static: true })
    richtext_container!: ElementRef;

  3. Initialize in ngOnInit - call new Richtext(this.richtext_container.nativeElement, { value }).

  4. Load content - set value in the config, or apply it later with setValue().

  5. Clean up in ngOnDestroy by calling editor.destructor() to remove the widget and its listeners.

API reference​

Additional resources​