Getting Started with Angular
Lilac Editor provides an Angular component and directive with Zone.js integration for seamless integration with Angular applications.
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
Zone.js Integration
Automatic change detection with Angular's Zone.js for seamless updates.
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.