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.

This tutorial demonstrates how to replace the default icons in Smart.Grid action buttons with your own custom icons.

Step 1: Prepare Your Custom Icon Font

Before you can use custom icons in Smart.Grid, you need an icon font that contains your desired icons. Popular tools for generating icon fonts include IcoMoon and Fontello. Once you have your font:

  • Include the font in your project.
  • Note the font-family name.
  • Identify the Unicode values or ligature names for each icon.

Step 2: Include the Font in Your Project

Reference your icon font in HTML. For example:

<link rel="stylesheet" href="path/to/custom-icons.css">

In our example, we used the Material icons from https://fonts.googleapis.com/css2?family=Material+Icons

Step 3: Replace a Grid icon

Use CSS to map your custom icons to Smart.Grid actions

html, body { padding: 10px; }

smart-grid {
    width: 100%;
    height: 600px;
}
smart-grid .smart-action-button div {
    border:none !important;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    text-transform: none;

    /* required for Material Icons */
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
}
smart-grid .smart-action-button div:before {
 content: "menu";
    font-family: "Material Icons";
  border: none !important;
  background: inherit !important;
  
}
smart-grid .smart-action-button div:after {
  display: none;
   border: none !important;
}

.smart-grid-icon.smart-sort-button {
  font-family: 'Material Icons';
  --smart-icon-arrow-down: 'arrow_downward'
}

Step 4: Configure Your Grid

Create a Smart.Grid and enable command columns or toolbar actions. Example:

<smart-grid id="grid"></smart-grid>
const grid = document.getElementById('grid');

this.grid.dataSource = [
{ id: 1, name: 'Apple', price: 1.2 },
{ id: 2, name: 'Banana', price: 0.8 }
];

this.grid.columns = [
	{ label: 'ID', dataField: 'id' },
	{ label: 'Name', dataField: 'name' },
	{ label: 'Price', dataField: 'price' }
];

this.grid.sorting = {
  enabled: true
}

this.grid.editing = {
	enabled: true,
	mode: 'row'
};

Step 5: Verify Your Icons

Open your page in a browser and verify that each action button displays the correct custom icon. Adjust the font size or spacing as needed using CSS.

Tips and Best Practices

  • You can use different icons for toolbar and command column buttons by adjusting your CSS selectors.
  • If your icons are ligatures, ensure content matches the icon name; for Unicode icons, use the corresponding code.
  • Use !important if your theme overrides it.
  • Maintain a consistent icon size for a clean UI.
Now, let's modify the Sort icon. In order to do that, we need to override the .smart-sort-button CSS class and set the font-family to our Custom icons class. Then set a new value to the CSS variable used for applying an icon. 
.smart-grid-icon.smart-sort-button {
  font-family: 'Material Icons';
  --smart-icon-arrow-down: 'arrow_downward'
}
For AI tooling

Developer Quick Reference

Topic: grid-custom-icons   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.