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.

onRowInit(index, row) {
	if (index < 3) {
		row.freeze = true;
	}
}
	

onRowInit(index, row) {
	if (index > 2996) {
		row.freeze = 'far';
	}
}