Angular Data Grid Overview

Angular grid is UI component that is used in applications to display and manage tabular data. It enables you to present data in rows and columns, using a number of features like sorting, filtering, pagination, and many more. In addition, Angular supports custom elements, so you can use the free Angular grid in Apex Grid with ease.

How To Get Started with Apex Grid for Angular

To add Apex grid to your Angular application, install the package from npm.

npm install apex-grid

Before starting the application, make sure to import and pass the custom element schema as shown below.

// app.module.ts
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
  export class AppModule {}

You can now use the Apex grid in your application!

// app.component.ts

  import { Component } from '@angular/core';
  import { ApexGrid, ColumnConfiguration } from 'apex-grid';
  
  ApexGrid.register();
  
  @Component({
    ...
    template: `
      <main>
        <apex-grid [columns]="columns" [data]="products">
        </apex-grid>
      </main>
    `
  })
  export class AppComponent {}
  
    columns: ColumnConfiguration<Products> = [...];
    products: Products[] = [...];

Angular Data Grid Overview

Stay Updated