Angular

@freegridjs/angular는 Angular 17 이상용 standalone 컴포넌트 <free-grid>를 제공합니다. 이벤트는 같은 이름의 output이고, paste와 scroll만 (gridPaste), (gridScroll)입니다. 그리드는 Angular…

실행 예제Angular

Angular에서는 standalone 컴포넌트 <free-grid>에 입력과 출력만 연결하면 됩니다.

이 데모의 코드

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" theme="erp" [height]="520"
               (ready)="api = $event" (cellClick)="open($event.row)" />
  `,
})
export class OrdersComponent {
  columns = [{ field: 'name' }, { field: 'total', type: 'number' }];
  rows = [];
  api?: GridApi;
  open(row: unknown) { console.log(row); }
}
// global styles: @import '@freegridjs/core/styles.css';

@freegridjs/angular는 Angular 17 이상용 standalone 컴포넌트 <free-grid>를 제공합니다. 이벤트는 같은 이름의 output이고, paste와 scroll만 (gridPaste), (gridScroll)입니다. 그리드는 Angular zone 밖에서 돌아가므로 스크롤할 때 변경 감지가 일어나지 않습니다.

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" theme="erp" [height]="520"
               (ready)="api = $event" (cellClick)="open($event.row)" />
  `,
})
export class OrdersComponent {
  columns = [{ field: 'name' }, { field: 'total', type: 'number' }];
  rows = [];
  api?: GridApi;
  open(row: unknown) { console.log(row); }
}
// global styles: @import '@freegridjs/core/styles.css';