Syncfusion AI Assistant

How can I help you?

Installing Syncfusion® Angular UI Components

2 Feb 20262 minutes to read

Syncfusion® Angular UI Components (Essential® JS 2) are modern, high-performance controls distributed as npm packages. This guide covers installing one or more components into an Angular project.

Prerequisites

Before installing, ensure the following prerequisites are met:

  • Node.js: Download and install Node.js from nodejs.org.
  • npm: npm is included with Node.js and is required for installing Angular packages.
  • Angular CLI: Familiarity with Angular and the Angular CLI is recommended for efficient project setup and management.
ng new my-syncfusion-app --style=scss --routing=false
cd my-syncfusion-app

Syncfusion Angular packages are Ivy-compatible starting from version ~20.2.36 and officially support Angular 12 and above.

Installing a Specific Component Package

To install a component (e.g., Grid), run:

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

Install multiple at once:

npm install @syncfusion/ej2-angular-grids @syncfusion/ej2-angular-buttons --save

Install using package.json

To manage Syncfusion® components with your project’s package.json file:

  1. Open the package.json file located at the root of your Angular project. Add the Syncfusion® Angular UI component to the dependencies section, like below:

     {
     "dependencies": {
         "@syncfusion/ej2-angular-grids": "*"
     }
 }

    The asterisk (*) installs the latest version of the package. To use a specific version, replace * with the required version number. See the npm versioning documentation for more details.

  2. After updating package.json, open a terminal, navigate to your project’s root folder, and run:

     npm install

This approach takes advantage of the package management capabilities of npm, ensuring that all specified dependencies, including those for Syncfusion®, are installed together.

For a deeper understanding of the package.json file and its configuration options, see the official npm documentation.

By following these steps, Syncfusion® Angular components are integrated into your project, allowing immediate access to robust, high-performance UI elements. Syncfusion® supports multiple module systems, including ES6 and UMD, ensuring broad compatibility across various Angular project setups.