Installation in Angular

19 Aug 20251 minute to read

This guide provides step-by-step instructions for installing Syncfusion® Angular UI Components (Essential® JS 2), which extend Angular applications with a comprehensive suite of UI controls. All Syncfusion Angular components are distributed via npm, ensuring a seamless and familiar installation experience for Angular developers.

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.

Installing a Package

Syncfusion® Angular UI components are available on npm. To add a specific component package to your Angular project, run the following command:

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

This command installs the Grid package and updates your project’s package.json file.

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.