Getting Started with Angular Using Angular CLI and TypeScript

25 Jun 20264 minutes to read

This guide provides step-by-step instructions for setting up an Angular project using TypeScript with Angular CLI, and integrating Syncfusion® Angular components to enhance your application’s functionality.

The Angular CLI is a powerful command-line tool that simplifies the creation, management, and building of Angular applications, enabling a quick start to development.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components.

Set Up the Angular Application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Create a New Application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app

Adding Syncfusion® Angular Packages

Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.

This guide uses the Angular Grid Component for demonstration. Add the Angular Grid component with:

ng add @syncfusion/ej2-angular-grids

This command performs the following automatic configurations:

  • Adds @syncfusion/ej2-angular-grids package and peer dependencies
  • Imports the Grid component in your application
  • Registers the Material3 theme in angular.json

For version compatibility, see the Version Compatibility guide.

Legacy Support: For older Angular projects using ngcc (Angular 15 and below):

npm add @syncfusion/[email protected]

Note: Angular 16+ no longer supports ngcc. For questions, refer to the FAQ.

Import Syncfusion® CSS Styles

Syncfusion® Angular component themes can be applied using CSS or SASS from the npm theme packages. Additionally, CDN, CRG, or Theme Studio. For more information, refer to the themes documentation.

This example uses the Material 3 theme for the Grid component from the theme package. To install the Material 3 theme package, use the following command:

npm install @syncfusion/ej2-material3-theme --save

The required styles for the Grid component are imported as shown below:

@import "../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css";

See the SCSS guide for SCSS styles.

Adding Syncfusion® Angular Components

Now, you can add the Angular Grid component to your src/app/app.ts file using the <ejs-grid> selector and bind data through the dataSource property. Define and customize columns using the <e-columns> and <e-column> elements.

import { Component } from '@angular/core';
import { GridAllModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridAllModule],
  template: `
    <h1>Syncfusion Angular Grid</h1>

    <ejs-grid [dataSource]="data" height="300">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-column>
        <e-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="120"></e-column>
      </e-columns>
    </ejs-grid>
  `
})
export class App {
  public data: Object[] = [
    {
      OrderID: 10248,
      CustomerID: 'VINET',
      OrderDate: new Date(1996, 6, 4),
      Freight: 32.38
    },
    {
      OrderID: 10249,
      CustomerID: 'TOMSP',
      OrderDate: new Date(1996, 6, 5),
      Freight: 11.61
    },
    {
      OrderID: 10250,
      CustomerID: 'HANAR',
      OrderDate: new Date(1996, 6, 8),
      Freight: 65.83
    }
  ];
}

Run the application

To run the application, use the following command:

ng serve

The application compiles and launches on a development server. Open http://localhost:4200 to view it.

Video Guide:

See Also