Create project

Syncfusion provides project templates for VisualStudio Code to create Syncfusion Angular applications. Syncfusion Angular creates applications with the required Syncfusion NPM packages, and component render code for the Grid, Chart, and Scheduler components, and the style for making development easier with Syncfusion components.

The Syncfusion Visual Studio Code project template provides support for Angular project templates from v18.3.0.35.

The following steps help you create Syncfusion Angular Applications through the Visual Studio Code:

  1. In Visual Studio Code, open the command palette by pressing Ctrl+Shift+P. The Visual Studio Code palette opens, search the word Syncfusion so you can get the templates provided.

    CreateProjectPalette

  2. Select Create Syncfusion Angular Project and then press Enter. The Project Location palette appears to store the application.

    ProjectLocation

  3. Provide the destination location and then press Enter. The Project Name palette appears. Provide the name of the application and enter.

    ProjectName

  4. The palette of theme selection appears. Choose the preferred theme and then click Enter. The project will be created.

    Themes

  5. The created Syncfusion Angular app is configured with the Syncfusion NPM packages, styles, and the component render code for the Syncfusion component added.

    NPM Packages

    Styles

    Components

Run the application

To run the application,follow the below steps.

  1. Open the terminal window by go to Terminal -> New Terminal

  2. Then run the npm install command to restore the NPM packages.

    NPM Command

  3. Now, run the ng serve command to compile the Syncfusion Angular application.

    NG Command

    To run the ng serve command, you should be installed the Angular CLI by using the command npm install -g @angular/cli

  4. After compilation process completed, open the local host link in browser to see the output.

    Output