Rapid application development on Angular + Ag-Grid

One of the days, as usual, drinking coffee, I receive a message on Skype that I need to make an application with uncomplicated functionality in the shortest possible time. It was necessary to have a table with sorting and pagination, the ability to filter by word, date, etc. Also have a page with information about the selected item from the table.

Having such TZ on hand, it was decided to use the latest Angular in conjunction with Ag-Grid, so as not to waste precious time.

It all starts pretty standard, installing and creating a standard Angular application:

Install Angular yourself
')

npm install -g @angular/cli 

Create a new project

 ng new my-app 

And we can run

 cd my-appng serve --open 

Everything, nothing new or complicated here. The whole procedure takes about 20 minutes and we already have a working application. We can start hanging on him what we need.

We start with a simple one.

Bootstrap. Why he? Simple, fast, effective. As part of the task that we have, it will be enough for us. In fact, there are several input fields, a couple of buttons of different colors and that's it. We put the third version together with jQuey:

 $ npm install bootstrap@3 jquery --save 

Then go to the file angular-cli.json and add to it:

 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], 

And ready, now Bootstrap will work as it should on your pages. And we continue.

Ag-Grid I chose it for myself, since I have experience with this component, it is quite flexible, and, after all, is better suited for our task. For the full use of its set:

 npm install ag-grid-angular npm install ag-grid 

Then go to app.module.ts and import the components we need:

 import {AgGridModule} from "ag-grid-angular/main"; 

We need to install the install ag-grid later. Also add to our file

  imports: [ AgGridModule.withComponents([ LinkComponent ]) ], 

I want to draw attention to AgGridModule.withComponents that will allow us to add and use the components we wrote in Ag-Grid. The LinkComponent that is there is our component for drawing data as a link. Later back to him.

We also create the Components, Services, View-Models folders, we have our own components in them, services for them and we connect the whole thing, I think there should be no questions or problems here. Let's go back better to our Ag-Grid.

In the component where Ag-Grid is used we connect:

 import { GridOptions, IDatasource, IGetRowsParams, ColDef, ColGroupDef, NodeChildDetails, RowNode } from "ag-grid"; import { LinkComponent } from '../example/example'; 

At the moment, we certainly will not use all the connected components of the grid, but for the future I need them. You naturally can remove or add something at will. We also connect our link component.

It is time to start creating a grid. In general, I did this:

  this.gridOptions = <GridOptions>{}; this.gridOptions.columnDefs = [ { headerName: "Example1", field: "Example1", }, { headerName: "Example2", field: "Example2", cellRendererFramework: LinkComponent, }, { headerName: "Example3", field: "Example3", } ]; this.ExampleService.getExamplesFields().then(response => { this.examples = response; this.gridOptions.api.setRowData(this.examples); }); } 

And in the html of our grid component we connect like this:

 <ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-fresh" [gridOptions]="gridOptions"> </ag-grid-angular> 

But let's order. In order for the column to be filled with the data we need, a minimum is necessary, this is its name and fieldid. If you pay attention to the cellRendererFramework in the second column, this is the very parameter that allows us to draw the data in the column as we want. Let's see how this component is arranged inside.

 import { Component } from "@angular/core"; @Component({ selector: 'link-component', templateUrl: './link-component.component.html' }) export class LinkComponent { public params: any; agInit(params: any): void { this.params = params; } } 

That's all, in params we keep the contents of the desired cell. To be more specific, in params.value. In params.data we can see all the data of the selected line in the grid, for example, we will need an exampleID in order to go to the next page with the desired record ID. The template for this component looks like this:

 <a [routerLink]="['/exampleform', params.data.exampleID]">{{ params.value }}</a> 

Here we go a little further and talk about routing, but for now about our link. As we can see, clicking on this line will send us to the page of the selected record, adding its ID to the link, thanks to which we can later turn to the server that will return the desired record to us.

I made the routing easy enough.

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ExamplesView } from './components/Examples/Examples.component'; import { AllExamples } from './components/Examples/Examplest.component'; const appRoutes: Routes = [ { path: 'Examples/:id', component: ExamplesView }, { path: '', component: AllExamples }, ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [ RouterModule ], providers: [ ] }) export class AppRoutingModule { } 

That's all we need at the moment. I think it’s not particularly necessary to focus here. In the following articles in more detail will focus.

Let's return to our component with. How to draw columns, and change the data mapping in them, we figured out. Now you need to fill the grid with this data. Everything is also quite simple:

  this.ExampleService.getExamplesFields().then(response => { this.examples = response; this.gridOptions.api.setRowData(this.examples); }); 

We turn to our service, which will return us json with data. this.examples we have examples: examplesViewModel []; Our view model looks like this:

 export class FeedbackFormData { public Example1: string; public Example2: string; public Example3: number; } 

We also import it into our component. And our fieldid in the grid must match what is in our model. And voila, our data is where we need it. Subsequently, for example, if in the presence of server filtering, we want to update the data in the grid, we can do it like this:

 filter() { this.exampleFilter = this.datePipe.transform(this.maxDate, 'yyyy-MM-dd'); this.HomeService.getPeriodForm(this.exampleFilter, this.search).then(response => { this.examples= response; this.gridOptions.api.setRowData(this.examples); }) } 

And the data in our grid will be updated. Well, on the second page to say nothing special. We obtain data about the record with the desired id and work with them. This is how literally in a couple of hours you can make a simple application with a grid and blackjack. In the next article we will talk more about the functionality of the grid and what can be done with it, our component that draws a link is only the tip of the iceberg. I will also talk about the implementation of pagination and sorting in the grid.

Thank.