Getting Started with Angular Block Editor

This guide explains how to add the Syncfusion Block Editor component to a new Angular application. The result is a fully wired, empty editor that renders with the default theme; you can then load blocks through the blocks property or the API methods.

Prerequisites

Before you begin, ensure the following are installed:

  • Node.js (v18 or later) — required by the Angular CLI.
  • Angular CLI (v14 or later) — required for the standalone components used in this guide.

Set up the Angular environment

Use the Angular CLI to set up your Angular application. The CLI requires Node.js v18 or later. To install the Angular CLI globally, run the following command:

npm install -g @angular/cli

Create an Angular Application

  1. Run the following Angular CLI command to create a new application:

     ng new my-app

  2. When prompted for the stylesheet format, accept the default (CSS) or choose another option:

    Angular CLI initial setup prompt

  3. When prompted to enable Server-Side Rendering (SSR) and Static Site Generation (SSG), select the appropriate configuration:

    Angular CLI Server-Side Rendering prompt

  4. When prompted to configure AI tooling, select any preferred option based on the development workflow:

    Angular CLI AI tooling prompt

  5. Navigate to the project folder:

     cd my-app

Add Syncfusion® Block Editor package

All Essential JS 2 packages are published in the npmjs.com registry. The @syncfusion/ej2-angular-blockeditor package supports Angular 14 and later. Install the Block Editor with the following command:

npm install @syncfusion/ej2-angular-blockeditor

If you want to seed the editor with content programmatically, also install the model package:

npm install @syncfusion/ej2-blockeditor

If you see a peer-dependency warning for @angular/core after install, run ng update to align the CLI to the version targeted by the Block Editor package.

Add a CSS reference

Syncfusion provides multiple themes for the Block Editor. For the full list, see the themes packages overview.

Install a Syncfusion theme package to provide the required styles. The following example installs the Material 3 theme:

npm install @syncfusion/ej2-material3-theme --save

To render the Block Editor, add the following import to your src/styles.css to load the editor’s theme and dependency styles:

@import '../node_modules/@syncfusion/ej2-material3-theme/styles/blockeditor/index.css';

If you use a CSS preprocessor or a custom build pipeline, ensure that the editor’s CSS is bundled into the final stylesheet before deployment.

Add the Block Editor component

Modify the template in src/app/app.ts (or src/app/app.component.ts for older Angular CLI versions) to render the Block Editor by using the <ejs-blockeditor> selector:

import { Component } from '@angular/core';
import { BlockEditorModule } from "@syncfusion/ej2-angular-blockeditor";

@Component({
    imports: [BlockEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render BlockEditor component. -->
    <div id="container" >
        <ejs-blockeditor />
    </div>`
})

export class App {
}
/* You can add global styles to this file, and also import other style files */
@import '../node_modules/@syncfusion/ej2-material3-theme/styles/blockeditor/index.css';

Note: Angular CLI 21 and later generates the root component as src/app/app.ts. Earlier Angular CLI versions use src/app/app.component.ts. The Block Editor’s selector (ejs-blockeditor) is identical in both layouts.

Run the application

Run the application in the browser using the following command:

ng serve --open