The following post surely catches a bit surface of the major revamp which has been promised by AngularJS since its inception. With such technologies growing, the best is always yet to come! A lot seems to have changed under the hood in regards to tooling. For example, it offers seamless upgrading and adding new libraries to your developed apps.
Without wasting further time I would straight jump to the crux of the post; i.e. how to integrate and use ng2-smart-tables with Angular . But before that do you know what is ng2-smart-table? Of course, it’s a library featuring npm package and pre-defined components and directives mainly used for sorting, searching, filtering and displaying things exactly in the form of a table. So to begin with,
Prerequisites
- Install and Setup Angular on your Workspace - Link.
Time to generate new project!
ng new smart-table-example
Before coming to any conclusion it is advisable to check whether everything is in sync or not. Run ng serve –open or you can also visit the URL localhost:4200.
Smart tables with Angular
Install rxjs- compat
One of the major cons faced when dealing with the Angular ecosystem is the compatibility issue. Many third party libraries are found incompatible whenever a new Angular version is released. And the same goes for Angular moreover depending on TypeScript 2.7 and RxJS version . Another reason for third party libraries not being compatible is they haven’t been updated. So in order to make things work with the latest version, it is advisable to use another third-party library in our app, called rxjs-compat.
npm i rxjs-compat --save
One additional Tip for you: In future you might find third party libraries which might or might not be compatible. For that rxjs-compat. is certainly not required. Being an AngularJS developer, you should check the documentation of the third-party library before integrating it with Angular.
Installing the ng2-smart-table library
Install it as a local dependency on the Angular project.
npm install –save
In the dictionary of Angular Application development, you will certainly find a global space to register a module called app.module.ts. All you require doing is open it and add the following:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2SmartTableModule } from 'ng2-smart-table'; // add
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
Ng2SmartTableModule // add
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
If no errors found here at this step; it surely means the Webpack has been succeeded in compiling with the app. Which also means it’s time to move forward.
Table Creation
Time to generate a component and name it table as it is created using the ng g c table code. The ng command won’t just create a default component but also updates app.module.ts at regular intervals. The new generated component will be found on inside src/app/. Check the code below.
import { Component } from '@angular/core';
// add the following
import { TableComponent } from './table/table.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'smart-table-example';
}
Back to the Backend
Here we are going to create a mock backend server, where installing json-server becomes easy from npm. This will also serve data as an API to the developed AngularJs Application.
npm install -g json-server
Also, create a directory called data and a new file named db.json. Try adding some mock data in JSON format. It will be easier to render.
{ "employees": [{
"id": 1,
"name": "Jason Bourne",
"employeeId": "us2323",
"city": "New York"
},
{
"id": 2,
"name": "Mary",
"employeeId": "us6432",
"city": "San Jose"
},
{
"id": 3,
"name": "Sameer",
"employeeId": "in2134",
"city": "Mumbai"
},
{
"id": 4,
"name": "Sam Hiddlestone",
"employeeId": "au9090",
"city": "Melbourne"
}]
}
As soon as you are done! A successful message will be prompted.
Instead of creating make the Table Smart
Now we have reached the point where the table is rendering as a static. In simple words, it cannot do any kind of sorting or searching as it does not have any feature or functionality. Making things more dynamic is what we aim here. We need to add some configuration.
Create an object inside table.component.ts and call it settings. This object contains columns that are displayed on the table.
import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Table } from './Table';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styles: []
})
export class TableComponent implements OnInit {
employees: Table[];
// add this config
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Name'
},
city: {
title: 'City'
},
employeeId: {
title: 'Employee No.'
}
}
};
constructor(private tservice: TableService) {}
ngOnInit() {
this.tservice.getData().subscribe((data: Table[]) => {
this.employees = data;
});
}
}
Featuring all the fields coming from our service, it is certainly not necessary to have the column name identical with the original key. One can add or modify the name for a column using the title. In addition to this, what else do we require is source which gives reference to the actual data from our service to the ng2-smart-table directive. Finally, we have reached the last piece of puzzle by which we can create a dynamic table.
Lastly,
As an AngularJS developer, I would suggest you to try and play with it and explore as much functionalities as you can. Try noticing how it automatically add by default various functionalities to edit and update or delete a field as well add a search bar over every column.
Author Bio
Shira Gray is working as a Business Development Executive at Angular Development Company – eTatvaSoft.com,to know more information about the company. She writes about emerging technologies. Being a tech geek, she keeps a close watch over the industry focusing on the latest technology news and gadgets.