Getting Started with the Angular Block Editor Component

18 Nov 20183 minutes to read

This guide explains how to create a default Block Editor component in a new Angular application.

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 Angular Environment

Use the Angular CLI to set up your Angular applications. Angular 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 available 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 component with the following command:

npm install @syncfusion/ej2-angular-blockeditor

Add CSS Reference

Syncfusion provides multiple themes for the Block Editor component. For a complete list of available themes, refer to the themes packages.

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 component, add the following import in the [src/styles.css] file to load all required dependency styles:

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

Add Syncfusion Block Editor Component

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

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" >
        <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.

Run the Application

Run the application in the browser using the following command:

ng serve --open