Add Syncfusion® Angular component in the Angular application

19 Aug 20252 minutes to read

The Syncfusion® Angular code snippet utility for Visual Studio Code provides snippets for adding a Syncfusion® Angular component with various features in the html code editor file of the Angular Application.

The Syncfusion® Angular code snippet is available from Essential Studio® 2021 Vol 3 (v19.3.0.43).

Add a Syncfusion® Angular component

Follow these steps to use the Syncfusion® Angular code snippet utility in your Angular application:

  1. Open Visual Studio Code and load an existing Angular application or create a new one.

  2. Open the html file that you need and place the cursor in required place where you want to add Syncfusion® component.

  3. You can find the Syncfusion® Angular component with the various features by typing the ejs word in the format shown below.

     ejs-<Syncfusion component name>-<Syncfusion component feature>

 For example: ejs-grid-grouping

  4. Select the Syncfusion® component from the suggestion list and press Enter or Tab. The component code will be inserted into the HTML file.

    Code Snippet

  5. After the code snippet is added, use the Tab key to navigate through editable fields and provide the required values to render the component with data. A Syncfusion® help link is included at the top of the snippet for more details about the component features.

    Help

Configure the Angular application with Syncfusion

The Syncfusion® Angular snippet only add the code snippet alone in the html file. You need to configure the Angular application with Syncfusion® by adding the required Syncfusion® Angular NPM, component modules, and themes by manually. To configure, refer the steps below:

  1. Open the Angular package.json file and manually add the necessary Syncfusion® Angular npm package(s). Then, navigate to the project directory in the command prompt and run npm install to restore the Syncfusion® packages.

    NPM Package

  2. Update your Angular module file by importing and adding the relevant Syncfusion® Angular component modules to your application module.

    Module

  3. Add the Syncfusion® Angular theme entry in the style.css file.

    Themes