Getting Started with the Angular Block Editor Component

26 Aug 20254 minutes to read

This guide explains how to create and configure the Block Editor component in a new Angular application.

Dependencies

The list of dependencies required to use the Block Editor component in your application is given below:

|-- @syncfusion/ej2-angular-blockeditor
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-inputs

Set up Angular Environment

Use the Angular CLI to set up your Angular applications. To install the Angular CLI globally, run the following command.

npm install -g @angular/cli

Create an Angular Application

Create a new Angular application using the Angular CLI.

ng new my-app
cd my-app

Install the Syncfusion® Block Editor Package

Syncfusion® packages are distributed in npm as @syncfusion scoped packages. You can find all Syncfusion Angular Syncfusion® packages on npm link.

Syncfusion® provides two package structures for Angular components:

  1. Ivy library distribution package: For modern Angular applications.
  2. Angular compatibility compiler (ngcc) package: For legacy Angular applications.

Ivy Library Distribution Package

Syncfusion® Angular packages (>=20.2.36) use the Ivy distribution to support the Angular Ivy rendering engine and are compatible with Angular version 12 and newer.

Install the @syncfusion/ej2-angular-blockeditor package with the following command.

npm install @syncfusion/ej2-angular-blockeditor --save

Angular Compatibility Compiled (ngcc) Package

For applications using Angular versions below 12, use the legacy (ngcc) package. of the Syncfusion® Angular components. To download the ngcc package use the below.

Install the @syncfusion/ej2-angular-blockeditor@ngcc package with the following command.

npm install @syncfusion/ej2-angular-blockeditor@ngcc --save

To specify the ngcc package in the package.json file, add the -ngcc suffix to the package version.

@syncfusion/ej2-angular-blockeditor:"20.4.38-ngcc"

Note: If the --tag ngcc is not specified during installation, the Ivy library package will be installed by default, which may cause compatibility issues in older Angular versions.

Add CSS Reference

The following CSS files are available in ../node_modules/@syncfusion package folder.
This can be referenced in [src/styles.css] using following code.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-blockeditor/styles/material.css';

Add Syncfusion Block Editor Component

Modify the template in the [src/app/app.component.ts] file to render the Block Editor component. Add the Angular Block Editor by using the <ejs-blockeditor> selector in template section of the app.component.ts file.

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

@Component({
    imports: [ BlockEditorModule ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render BlockEditor component. -->
    <div class="container" style="width: 40px; margin: 50px auto;">
        <div ejs-blockeditor></div>
    </div>`
})

export class AppComponent { }

Run the Application

Run the application in the browser using the following command:

ng serve

The following example shows a default Block Editor component.

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" >
        <div ejs-blockeditor ></div>
    </div>`
})


export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));