Add Syncfusion® Angular component to your app

18 Nov 20182 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

The following steps help you to use the Syncfusion® Angular code snippet in your Angular Application.

  1. In Visual Studio Code, open an existing Angular Application or create a new Angular Application.

  2. Open the HTML file that you need and place the cursor in the required place where you want to add the 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<sup style="font-size:70%">&reg;</sup> component name>-<Syncfusion<sup style="font-size:70%">&reg;</sup> component feature>

 For example, ejs-grid-grouping

  4. Choose the Syncfusion® component and click the Enter or Tab key; the Syncfusion® Angular component will be added in the HTML file.

    Code Snippet

  5. After adding the Syncfusion® Angular component to the HTML file, use the Tab key to fill in the required values to render the component with data. You can also find the Syncfusion® help link at the top of the added snippet to learn more about the new Syncfusion® Angular component feature.

    Help

Configure 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 add the required Syncfusion® Angular individual NPM package(s) for the Syncfusion® Angular components manually. Then navigate to the package.json file location in the command prompt and run the npm install command to restore all the Syncfusion® Angular NPM packages.

    NPM Package

  2. Open your module file (for example, app.module.ts) and add the required Syncfusion® Angular component module entries to render the Syncfusion® components in your application.

    Module

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

    Themes