Grid - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { GridComponent, GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GridModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('grid', { read: GridComponent, static: false }) grid!: GridComponent;
}
<!-- app.component.html -->
<smart-grid #grid></smart-grid>

Use this.grid for API methods in this topic.

Grid Selection

Smart.Grid allows users to select Grid cells or rows in order to easily manipulate or navigate through them.

Selection is configured by setting the sub-properties of the property/object selection. To enable it, selection.enabled has to be set to true.

The major features related to selection are:


More information: property selection in the Grid API documentation.

Row Selection

Row selection allows the user to select one or multiple Grid rows. To enable row selection, selection.allowRowSelection has to be set to true.

Selection can be initiated according to the value of selection.action, which, by default, is 'click' (and can also be set to 'none' and 'doubleClick').

One or multiple rows can be selected. This depends on selection.mode. For more information, please refer to the Selection Modes section of this article.

When rows are selected, they are highlighted accordingly:

The selection of a particular row can be disabled by setting allowSelect to the respective row object to false. A row can be selected programmatically by setting its property selected.

Cell Selection

Cell selection allows the user to select one or multiple Grid cells. To enable cell selection, selection.allowCellSelection has to be set to true.

As with row selection, cell selection can be initiated according to the value of selection.action, which, by default, is 'click'.

One or multiple cells can be selected. This depends on selection.mode. For more information, please refer to the Selection Modes section of this article.

When cells are selected, they are highlighted accordingly:

A cell can be selected programmatically by setting the property selected of the respective cell object.

Checkbox Selection

An alternative way to select Grid rows is via checkboxes that can be enabled by setting selection.checkBoxes.enabled to true. When enabled, a column with checkboxes appears on one side of the Grid (accroding to the value of the property selection.checkBoxes.position - 'near' (left) or 'far' (right).

A "select all" checkbox can, optionally, appear in the header of the column with checkboxes. Its behavior is controlled by selection.checkBoxes.selectAllMode:

  • 'none' - the "select all" checkbox does not appear.
  • 'page' - selects all rows on the page.
  • 'all' - selects all rows in the grid.

Checkbox selection can be initiated according to the value of selection.checkBoxes.action, which, by default, is 'click' (and can also be set to 'none' and 'doubleClick').

Selection Modes

There are three selection modes available to row and cell selection. To configure which one is applied, selection.mode has to be set to one of the following:

  • 'one' - only one row/cell can be selected at a time. When the user clicks a new row/cell, the previously selected one is unselected.
  • 'many' - multiple rows/cells can be selected at a time. When the user clicks a new row/cell, it is selected as well. When the user clicks a selected row/cell again, it is unselected.
  • 'extended' - multiple rows/cells can be selected at a time using Ctrl or Shift. Drag-selection is also available in this case if selection.allowDragSelection is enabled:

Header Selection

Selecting all cells from a column by clicking the column's header can be enabled by setting selection.allowColumnHeaderSelection to true.

Similarly, selecting a row by clicking its header is enabled by setting selection.allowRowHeaderSelection to true.

Selection-related Methods

For AI tooling

Developer Quick Reference

Topic: grid-selection   Component: Grid   Framework: Angular

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.