Get started with Angular Grid in 5 minutes

The fastest and most feature-rich Angular grid component from ag-Grid

Max Koretskyi
Aug 13, 2018 · 8 min read
Image for post
Image for post
Angular Grid Demo
Image for post
Image for post

Integration

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve
npm install --save ag-grid-community ag-grid-angular

Import dependencies

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
...
imports: [AgGridModule.withComponents(null), ...],
})
export class AppModule {}
@import 'ag-grid-community/dist/styles/ag-grid.css';
@import 'ag-grid-community/dist/styles/ag-theme-balham.css';

Add Angular Grid component to a template

<ag-grid-angular 
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>

Define configuration

Image for post
Image for post

Set data dynamically

Enabling features

Angular Grid Sorting

<ag-grid-angular
[enableSorting]="true"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
Image for post
Image for post

Angular Grid Filtering

<ag-grid-angular
[enableFilter]="true"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
Image for post
Image for post

Angular Grid Pagination

<ag-grid-angular
[pagination]="true"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
Image for post
Image for post

Angular Grid Editable Cells

columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price', editable: true}
];
Image for post
Image for post

Build Your Own Angular App With ag-Grid!

Learn more about ag-Grid and Angular

ag-Grid

We are ag-Grid and our mission is to build the best…

Max Koretskyi

Written by

Founder of inDepth.dev community. Passionate about Mentorship, TechEd and WebDev. Angular & React contributor.

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Max Koretskyi

Written by

Founder of inDepth.dev community. Passionate about Mentorship, TechEd and WebDev. Angular & React contributor.

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store