Quick Start

Installation

Install via Package managers such as npm or pnpm or yarn

npm

npm install ngx-editor

pnpm

pnpm install ngx-editor

yarn

yarn add ngx-editor

Usage

Import NgxEditorComponent and initialize the editor

app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgxEditorComponent, Editor } from 'ngx-editor';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: true,
  imports: [FormsModule, NgxEditorComponent],
})
export class AppComponent implements OnInit, OnDestroy {
  html = 'Hello world!';
  editor: Editor;
  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

Then in HTML

app.component.html

<ngx-editor [editor]="editor" [(ngModel)]="html"></ngx-editor>

For ngModel to work, You must import FormsModule from @angular/forms

Server-side rendering

The editor needs the browser DOM, so it can’t be rendered on the server. Creating it on the server throws document is not defined.

Render the routes that use the editor on the client:

app.routes.server.ts

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: 'editor',
    renderMode: RenderMode.Client,
  },
  {
    path: '**',
    renderMode: RenderMode.Prerender,
  },
];

If the rest of the page should still be rendered on the server, create the editor only in the browser and render it once it exists.

app.component.ts

import { Component, OnDestroy, OnInit, PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class AppComponent implements OnInit, OnDestroy {
  private platformId = inject(PLATFORM_ID);

  html = 'Hello world!';
  editor: Editor;

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.editor = new Editor();
    }
  }

  ngOnDestroy(): void {
    this.editor?.destroy();
  }
}

app.component.html

@if (editor) {
  <ngx-editor [editor]="editor" [(ngModel)]="html"></ngx-editor>
}