Lilac Editor - Angular Adapter

Getting Started with Angular

Lilac Editor provides an Angular component and directive that wrap the framework-agnostic core, so it drops into any Angular application.

Installation

# Using npm
npm install @lilac-wysiwyg/angular

# Using pnpm
pnpm add @lilac-wysiwyg/angular

# Using yarn
yarn add @lilac-wysiwyg/angular

Module Setup

// app.module.ts
import { NgModule } from '@angular/core';
import { LilacEditorModule } from '@lilac-wysiwyg/angular';

@NgModule({
  imports: [LilacEditorModule]
})
export class AppModule { }

Basic Usage

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-editor',
  template: `
    <lilac-editor
      [(ngModel)]="content"
      [toolbar]="{ show: true }"
      placeholder="Start writing..."
      (contentChange)="onContentChange($event)"
    ></lilac-editor>
  `
})
export class EditorComponent {
  content = '<p>Hello Angular!</p>'

  onContentChange(newContent: string) {
    console.log('Content updated:', newContent)
  }
}

Features

Component & Directive

Use it as a component or attach the directive to an existing element — both wrap the same core.

ngModel Support

Two-way data binding with Angular forms and ngModel directive.

Reactive Forms

Full support for ReactiveFormsModule with FormControl integration.

ControlValueAccessor

Implements Angular's ControlValueAccessor for custom form controls.

Angular Adapter v0.5.0