Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/angular-data-grid/getting-started/ below:

Angular Grid: Quick Start | AG Grid

Add AG Grid to your application in 60 seconds:

Install the ag-grid-angular package, which also installs ag-grid-community:

npm install ag-grid-angular

Register the AllCommunityModule to access all Community features:

import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 


ModuleRegistry.registerModules([AllCommunityModule]);

To minimize bundle size, only register the modules you want to use. See the Modules page for more information.

import { AgGridAngular } from 'ag-grid-angular'; 
import type { ColDef } from 'ag-grid-community'; 

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AgGridAngular], 
    styleUrls: ['./app.component.css'],
    template: ``
})

export class AppComponent {
    
    rowData = [
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ];

    
    colDefs: ColDef[] = [
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ];
}

Set Rows and Columns as ag-grid-angular component attributes:

template:
`
    <!-- The AG Grid component -->
    <ag-grid-angular
        [rowData]="rowData"
        [columnDefs]="colDefs" />
`

Below is a live example of the application running. Click </> Code to see the code.

To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

Now that you have a basic Angular Data Grid running, choose one of the following options to continue your learning journey:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4