Getting Started with the Angular Block Editor Component

18 May 20263 minutes to read

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

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 following Angular CLI command:

ng new my-app

This command will prompt you for a few settings for the new project, such as which stylesheet format to use.

By default, it will create a CSS-based application.

Then the CLI also displays an additional prompt asking whether to enable Server‑Side Rendering (SSR) and Static Site Generation (SSG), as shown below:

For this setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Then the CLI displays another prompt related to AI tooling support, as shown below:

Any preferred option can be selected based on the development workflow or project needs.

Next, navigate to the project folder:

cd my-app

Adding Syncfusion Block Editor package

All available Essential JS 2 packages are published in the npmjs.com registry. Install the Block Editor component with the following command:

npm install @syncfusion/ej2-angular-blockeditor

Add CSS Reference

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

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-angular-blockeditor/styles/tailwind3.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;">
        <ejs-blockeditor />
    </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.

app.component.ts

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 AppComponent {
}

main.ts

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