Skip to main content

Angular

Welcome to the Angular-specific documentation for On-Codemerge, an adaptable web editor designed for easy integration with Angular applications.

Getting Started with Angular​

Integrating On-Codemerge into your Angular project is straightforward. Begin by installing the package.

Installation​

Run the following command in your Angular project directory to install on-codemerge:

npm i --save on-codemerge

Angular Integration Example​

Here's an example that demonstrates how to integrate On-Codemerge into an Angular project:

app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

@Component({
  selector: 'app-root',
  template: `<div #editorContainer></div>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild('editorContainer') editorContainer: ElementRef;

  ngAfterViewInit() {
    const editor = new EditorCore(this.editorContainer.nativeElement);
    editor.registerModule(new TextStylingButton());
    editor.registerModule(new TableButton());
    // ... register other modules

    editor.subscribeToContentChange((newContent) => {
      console.log('Content changed:', newContent);
    });

    // Optional: Set initial content
    editor.setContent("Initial content goes here");
  }
}

In this Angular component, we use @ViewChild to get a reference to the container DOM element. The ngAfterViewInit lifecycle hook ensures that the editor is initialized after the view is fully rendered. We then create an instance of EditorCore, passing in the native element of the referenced container. Afterward, modules like TextStylingButton and TableButton are registered to the editor to enhance its functionality. The subscribeToContentChange method is used for handling changes in the content, making it dynamic and responsive within your Angular application.