@freegridjs/angular
Angular component for FreeGrid. Standalone, works with or without zone.js (Angular 17+).
npm i @freegridjs/core @freegridjs/angular
import { Component } from '@angular/core';
import { FreeGridComponent } from '@freegridjs/angular';
import type { GridApi } from '@freegridjs/core';
@Component({
selector: 'app-orders',
standalone: true,
imports: [FreeGridComponent],
template: `
<free-grid [columns]="columns" [data]="rows" rowSelection="multiple" [height]="480"
(ready)="api = $event" (cellClick)="open($event.row)" />
`,
})
export class OrdersComponent {
columns = [{ field: 'name' }, { field: 'qty', type: 'number' }];
rows = [{ name: 'Pen', qty: 3 }];
api?: GridApi;
open(row: unknown) { console.log(row); }
}
Add @import '@freegridjs/core/styles.css'; to your global styles (or list it under styles in angular.json).
Every grid event is an output with the same name ((sortChange), (cellValueChanged), …); paste and scroll
are (gridPaste) and (gridScroll). columns, data, theme, locale, summary, groupBy, pivot,
fontSize and fontFamily update the grid when they change; other options go in [options] and apply at creation.
Passing a new array or object with the same content (an inline literal re-created on every render) does not reset anything: columns keep the widths, order and visibility the user changed, and groupBy and pivot are applied again only when their content changes; to undo what the user changed, call the API (resetColumnState(), setGroupBy()).
The grid runs outside the Angular zone, so scrolling does not trigger change detection.
Docs: https://freegrid.app/docs/#angular
License
The core grid (sorting, filters, editing, selection, pinned columns, pages and server rows, CSV export, printing, themes, languages) is free for everyone, companies included.
Paid features need a key after a 30-day trial per domain: row grouping and aggregation, pivot, charts, cell range selection, range copy and paste, fill handle, Excel and PDF export, workbook, server-side groups, advanced filter, side bar panels, context menu, summary rows, formulas, find, conditional formatting and merged cells. Development hosts (localhost, private networks, .local, .test) always have every feature.
- Personal, educational and non-commercial projects: a free personal key, valid 6 months and renewable any time, at https://freegrid.app/license/personal/
- Companies: KRW 200,000 per domain per year, or KRW 400,000 once (perpetual, updates within the major version bought). One key covers the domain and all its subdomains.
See https://freegrid.app/pricing/ and the LICENSE file.
기본 기능은 회사를 포함해 누구나 무료입니다. 유료 기능은 도메인마다 30일 체험 뒤 키가 필요합니다. 개인·교육·비영리 프로젝트는 무료 개인 키(6개월, 언제든 갱신)를, 회사는 도메인당 연 20만 원 또는 영구 40만 원 라이선스를 쓰며, 키 하나로 서브도메인까지 모두 쓸 수 있습니다. 자세한 내용은 https://freegrid.app/pricing/
import { setLicenseKey } from '@freegridjs/core';
setLicenseKey('FG1....'); // once for every grid on the page
or per grid: <free-grid licenseKey="FG1...." [columns]="columns" [data]="rows" />