How do I bind grid events in Angular?

Use Angular event binding syntax: (onChange)="onGridChange($event)" or add event listeners in ngAfterViewInit using @ViewChild to access the grid element.

Why do I get 'smart-grid is not a known element' error?

Import GridModule from 'smart-webcomponents-angular/grid' in your component's imports array (standalone) or AppModule imports.

smart-ui

JavaScript

Angular

Vue

React

Angular Grid - Setup

Smart UI for Angular supports both standalone components (bootstrapApplication) and NgModule-based apps (bootstrapModule(AppModule)). Steps 1-5 show the standalone path; the section below shows the NgModule path with the same package and styles.

Demo source (Smart UI repo): angular/src/grid/overview

1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import GridModule from smart-webcomponents-angular/grid: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { GridModule } from 'smart-webcomponents-angular/grid';

4 Root component (standalone)

Add GridModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component } from '@angular/core';
import { GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule],
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class App {
  dataSource = [
    { id: 1, firstName: 'Andrew', lastName: 'Fuller', productName: 'Black Tea', available: true, date: '2026-01-01', quantity: 10, price: 2.5, total: 25 },
    { id: 2, firstName: 'Nancy', lastName: 'Davolio', productName: 'Green Tea', available: false, date: '2026-01-01', quantity: 5, price: 3.0, total: 15 },
    { id: 3, firstName: 'John', lastName: 'Doe', productName: 'White Tea', available: true, date: '2026-01-01', quantity: 8, price: 2.0, total: 16 }
  ];

  dataSourceSettings = {
    dataFields: [
      'id: number',
      'firstName: string',
      'lastName: string',
      'productName: string',
      'available: boolean',
      'date: date',
      'quantity: number',
      'price: number',
      'total: number'
    ]
  };

  columns = [
    { label: 'First Name', dataField: 'firstName', editor: { required: true, template: 'input' } },
    { label: 'Last Name', dataField: 'lastName', editor: { required: true, template: 'input' } },
    { label: 'Product', width: 200, dataField: 'productName', editor: { required: true, template: 'dropDownList' } },
    { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },
    { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },
    { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }
  ];
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-grid as needed:

 <smart-grid
  [dataSource]="dataSource"
  [dataSourceSettings]="dataSourceSettings"
  [columns]="columns"
  [sortable]="true"
  [filterable]="true"
  [editable]="true"
  [columnResize]="true"
  [selectable]="true">
</smart-grid>

const response = await fetch('/api/data');
const data = await response.json();
grid.dataSource = data;

Enable inline cell editing
Allow users to edit cells directly in the grid
```
grid.editing = { enabled: true, mode: 'cell' };
```
Export to Excel
Export grid data to an Excel file
```
grid.exportData('xlsx', 'GridExport');
```
Apply column filtering
Enable filter row for column-based filtering
```
grid.filtering = { enabled: true, filterRow: { visible: true } };
```

Troubleshooting

How do I bind grid events in Angular?: Use Angular event binding syntax: (onChange)="onGridChange($event)" or add event listeners in ngAfterViewInit using @ViewChild to access the grid element.
Why do I get 'smart-grid is not a known element' error?: Import GridModule from 'smart-webcomponents-angular/grid' in your component's imports array (standalone) or AppModule imports.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.