JavaScriptAngularVueReact

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 Users

The Grid component has built-in dialogs for 'comments', 'history' of edits and support for multiple users. For example, if you create a web app with a Grid, you may want to track which user edited something or enable comments between the users. In order to handle such use-case scenarios, the users and currentUser properties are available.
Example:

currentUser: 0,
users: [
	{ id: 0, color: '#8E24AA', name: 'Andrew', image: '../../images/people/andrew.png' },
	{ id: 1, color: '#41B883', name: 'Anne', image: '../../images/people/anne.png' },
	{ id: 2, color: '#53B9E6', name: 'Janet', image: '../../images/people/janet.png' },
	{ id: 3, color: '#FFCD42', name: 'John', image: '../../images/people/john.png' },
	{ id: 4, color: '#DD5347', name: 'Laura', image: '../../images/people/laura.png' }
]
	

See example with multiple users: https://www.htmlelements.com/demos/grid/users/.


Dialog with comments section



After doing some edits in the Grid