Getting Started with Angular Standalone Component

5 Apr 20254 minutes to read

Standalone components in Angular offer a streamlined method to build applications by reducing reliance on NgModules. This approach allows for simpler application authoring without disrupting existing module-based applications, which can incrementally integrate standalone components without breaking changes.

Create a New Application

After installing the latest Angular CLI, initiate a new Angular project by executing the below command:

ng new syncfusion-angular-app

This command will initiate the setup process, prompting you to select configurations such as the stylesheet format for your project.

Initial Setup

The default setup creates a CSS-based application. To specify SCSS as your styling format, use:

ng new syncfusion-angular-app --style=scss

Initial Setup

Angular enhances developer productivity with server-side rendering (SSR) and static-site generation (SSG or prerendering) options in the ng new command. Enable SSR by running:

ng new syncfusion-angular-app --ssr

Once the project is set up, navigate to your project directory:

cd syncfusion-angular-app

Installing Syncfusion® Angular Packages

Syncfusion’s Angular packages are available under the @syncfusion scope on npm. Obtain these packages by visiting npm.

To add the latest Syncfusion® Angular packages, which are Ivy-compatible and support Angular 12 and above, execute:

ng add @syncfusion/ej2-angular-grids@latest

This command performs the following configurations in your Angular application:

  • Adds the @syncfusion/ej2-angular-grids package and its peer dependencies to package.json.
  • Imports GridModule into your application’s default standalone component app.component.ts.
  • Registers Syncfusion’s® default material theme in angular.json.

These steps simplify adding Syncfusion’s® Angular Grid module to your project for immediate use.

Adding Syncfusion® Angular Components

To incorporate Syncfusion® Angular components, define them in your template and configure their properties in the component class.

In src/app/app.component.ts, you can utilize column directives with <ejs-grid> selector and define <e-column> elements inside <ejs-grid>. Each e-column specifies attributes like field name, header text, and data type for the Grid columns.

import { Component } from '@angular/core';
import { GridModule, PagerModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  imports: [GridModule, PagerModule],
  template: `
  <h1>
    Syncfusion Angular UI Grid!
  </h1>

  <ejs-grid [dataSource]='data'>
    <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=90></e-column>
      <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
    </e-columns>
  </ejs-grid>
 `
  styleUrl: './app.component.css'
 })
export class AppComponent {
  public data: Object[] = [
    {
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
      ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
      ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    }
  ];
}

This configuration adds a data grid to your application, complete with specified columns and sample data.

Adding CSS References

The following CSS styles are available in the ../node_modules/@syncfusion folder. Reference them in src/styles.css as follows:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Run the Application

Execute the ng serve command in your terminal to launch the application. Once the server starts, open your browser to interact with the application.

Output

Note: If a license banner appears when running your application, you need to acquire and register a license key to use Syncfusion® components. Visit our Licensing Overview page for detailed instructions on obtaining and registering your license key.