Kendo UI for Angular Editor Manual Setup

The manual setup provides greater visibility and better control over the files and references installed in your Angular application.

If you already followed the installation steps in the Getting Started page, you can skip the manual setup approach demonstrated in this article.

You can install the required peer dependencies and a Kendo UI theme by running separate commands for each step and import the desired components and directives in your Angular component.

1. Install the Editor package together with its dependencies by running the following command:

   sh

    npm install --save @progress/kendo-angular-editor @progress/kendo-angular-buttons @progress/kendo-angular-common @progress/kendo-angular-dialog @progress/kendo-angular-dropdowns @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-toolbar @progress/kendo-angular-icons @progress/kendo-angular-label @progress/kendo-drawing @progress/kendo-licensing

2. Import the KENDO_EDITOR utility array in your standalone component to enable the entire feature set of the Editor:

   ts

   import { Component } from '@angular/core';
   import { KENDO_EDITOR } from '@progress/kendo-angular-editor';
   
   @Component({
       standalone: true,
       selector: 'my-app',
       imports: [KENDO_EDITOR]
   })

3. The next step is to style the components by installing one of the available Kendo UI themes—Kendo UI Default, Kendo UI Material, Kendo UI Bootstrap, or Kendo UI Fluent.

   3.1 To start using a theme, install its package through NPM.

   • Default theme

     sh

     npm install --save @progress/kendo-theme-default

   • Bootstrap theme

     sh

     npm install --save @progress/kendo-theme-bootstrap

   • Material theme

     sh

     npm install --save @progress/kendo-theme-material

   • Fluent theme

     sh

     npm install --save @progress/kendo-theme-fluent

   3.2 After the theme package is installed, reference it in your project. You can include a Kendo UI theme in your project in one of the following ways:

   • By using an external (CDN) link.
   • By using a precompiled CSS file.
   • By compiling the theme from the SCSS source files.

Learning Resources

• Editor Overview
• Get Started with Kendo UI for Angular
• Using Kendo UI for Angular with Angular CLI
• Styling Overview
• Theme Builder
• Customizing the Themes
• Activating Your License Key
• Virtual Classroom (Training Courses for Registered Users)