top

Smart Tables Integration and usage with Angular 6

In this tutorial, we are going to learn how to integrate and use ng2-smart-tables with Angular 6. The ng2-smart-table is a library that is available to us as an npm package and pre-defined components and directives for sorting, searching, filtering and displaying data in the form of a table. To start, please run the following command from your terminal window to install the latest version of angular/cli.npm install -g @angular/cli If you are already using angular/cli version above 6, please upgrade to the latest version. If it does not install then try in the sudo mode for Unix based machines. angular/cli not only scaffolds a directory structure for a project but also takes care of pre-configuration that is needed for an application. With the below command we generate our new project:ng new smart-table-example To see if everything is working fine, let us run ng serve --open. You can visit the URL http://localhost:4200/ to see our newly created project in action.Take a look at the steps below to integrate smart tables with Angular 6. Installing rxjs-compatAngular’s ecosystem struggles because of the compatibility issues of third-party libraries whenever a new Angular version is released. Similar is happening in Angular 6. It depends on TypeScript 2.7 and RxJS version 6. Not many third party libraries have been updated and thus, to make them work with the latest Angular version, we are going to use another third-party library in our app, called rxjs-compat.npm i rxjs-compat --save Please note that, in future, third-party libraries might be compatible and do not need rxjs-compat. So check the documentation of the third-party library you are using with Angular 6.Installing the ng2-smart-table libraryWe can install it as a local dependency on our Angular project.npm install --save In any Angular application, app.module.ts is the global space for registering a module. 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 you get no errors at this step and the webpack has compiled our app successfully, this means we can continue to work.Creating a TableWe will generate a component called table using ng g c table. The ng command will not only create a default component but also updates app.module.ts for us. You can find our newly generated component inside src/app/. To see if it is working, we will import this table component inside app.component.ts.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'; } Also modify the app.component.html file to render the table component.Building the BackendTo serve data as an API to our Angular app we currently are going to create a mock backend server. Install json-server globally from npm.npm install -g json-serverNow in our src/ directory, create a directory called data and inside it create a new file called db.json. We will be adding some mock data inside this file in JSON format. It will be easier to render JSON data in the Angular app.{ "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" } ] } To serve this data to our angular application, in a separate terminal window, write the following command:json-server --watch src/data/db.json --port 4000 You will be prompted with the following success message. Our data is accessible through the URL .Fetching Data using HTTP ClientMost front-end frameworks do not have a built-in mechanism to fetch data from remote API or a server. However, Angular leverages in this case, its HTTP Client which allows us to fetch data from the remote API, in our case the JSON server data. To make use of it, first, append the app.module.ts file.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; // add import { Ng2SmartTableModule } from 'ng2-smart-table'; import { AppComponent } from './app.component'; import { TableComponent } from './table/table.component'; @NgModule({ declarations: [AppComponent, TableComponent], imports: [ BrowserModule, Ng2SmartTableModule, HttpClientModule // add ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Inside the table folder, create two new files. First, Table.ts: this file works as a schema design (if you think in terms of the database) or an interface that let our Angular application know the type of data it is going to receive from the remote API. This will be helpful in creating a service, which is our next step.export interface Table { id: Number; name: String; city: String; employeeId: String; } Second, is our service file table.service.ts. Our service file contains an injectable class called TableService which will fetch the data from the remote API using HTTP client.import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class TableService {   constructor(private http: HttpClient) { }   url = 'http://localhost:4000';   getData() {     return this             .http             .get(`${this.url}/employees`);         } } Importing this service in app.module.ts as a provider which will enable our Table component to access it.import { TableService } from './table/table.service'; // ... providers: [TableService], Next, we modify our table.component.ts and table.component.html.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[];   constructor(private tservice: TableService) {}   ngOnInit() {     this.tservice.getData().subscribe((data: Table[]) => {       this.employees = data;     });   } }<table>   <thead>     <tr>       <th>ID</th>       <th>Name</th>       <th>City</th>       <th>Employee id</th>     </tr>   </thead>   <tbody>     <tr *ngFor="let employee of employees">       <td>{{ employee.id }}</td>       <td>{{ employee.name }}</td>       <td>{{ employee.city }}</td>       <td>{{ employee.employeeId }}</td>     </tr>   </tbody> </table> If you get a similar result like below, depending on the amount of your data, this means you successfully created the Table Service and fetched the data from a remote API using HttpClient. Making our Table SmartAt this point, our table is just rendering as static and does not have any functionality provided by the ng2-smart-table library such as sorting, searching, etc. To make it dynamic, we need to add some configuration, which is a required step when working with the ng2-smart-table library.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;     });   } } The column name contains those fields that are coming from our service. The column name does not have to be identical with the original key. You can add or modify the name for a column using the title. Another thing we need to add is called source which gives reference to the actual data from our service to the ng2-smart-table directive. Yes, our last piece of the puzzle to make our table dynamic is a directive provided by ng2-smart-library called the same. See it action app.component.html and replace our previous code.<ng2-smart-table [settings]="settings" [source]="employees"> </ng2-smart-table> The settings are the same object that we defined in the app.component.ts. The source is coming from Table service where we fetch data and make it available to our component using this.employees. Following is how your table will look now.Try to play with it to explore its functionalities. Notice, 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. It also adds sorting functionality by default. There are various advanced configurations that ng2 table library provide to us. For example, to add a multi-select checkbox, we can just edit the configuration or the settings object in our table component and this feature will be added to our existing table. Append table.component.tssettings = { selectMode: 'multi', // just add this columns: { id: { title: 'ID' }, name: { title: 'Name' }, city: { title: 'City' }, employeeId: { title: 'Employee No.' } } };And see yourself. I hope this tutorial helps you in finding ways for representing ng2-smart-tables in Angular 6. You can find the complete code for this tutorial at this Github repo.
Rated 4.5/5 based on 11 customer reviews
Normal Mode Dark Mode

Smart Tables Integration and usage with Angular 6

Aman Mittal
Blog
25th Sep, 2018
Smart Tables Integration and usage with Angular 6

In this tutorial, we are going to learn how to integrate and use ng2-smart-tables with Angular 6. The ng2-smart-table is a library that is available to us as an npm package and pre-defined components and directives for sorting, searching, filtering and displaying data in the form of a table. To start, please run the following command from your terminal window to install the latest version of angular/cli.

npm install -g @angular/cli

If you are already using angular/cli version above 6, please upgrade to the latest version. If it does not install then try in the sudo mode for Unix based machines. angular/cli not only scaffolds a directory structure for a project but also takes care of pre-configuration that is needed for an application. With the below command we generate our new project:

ng new smart-table-example 

To see if everything is working fine, let us run ng serve --open. You can visit the URL http://localhost:4200/ to see our newly created project in action.


Smart table


Take a look at the steps below to integrate smart tables with Angular 6


Installing rxjs-compat

Angular’s ecosystem struggles because of the compatibility issues of third-party libraries whenever a new Angular version is released. Similar is happening in Angular 6. It depends on TypeScript 2.7 and RxJS version 6. Not many third party libraries have been updated and thus, to make them work with the latest Angular version, we are going to use another third-party library in our app, called rxjs-compat.

npm i rxjs-compat --save

Please note that, in future, third-party libraries might be compatible and do not need rxjs-compat. So check the documentation of the third-party library you are using with Angular 6.


Installing the ng2-smart-table library

We can install it as a local dependency on our Angular project.

npm install --save 

In any Angular application, app.module.ts is the global space for registering a module. 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 you get no errors at this step and the webpack has compiled our app successfully, this means we can continue to work.


Creating a Table

We will generate a component called table using ng g c table. The ng command will not only create a default component but also updates app.module.ts for us. You can find our newly generated component inside src/app/. To see if it is working, we will import this table component inside app.component.ts.

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';
}

Also modify the app.component.html file to render the table component.



smart table example


Building the Backend

To serve data as an API to our Angular app we currently are going to create a mock backend server. Install json-server globally from npm.

npm install -g json-server

Now in our src/ directory, create a directory called data and inside it create a new file called db.json. We will be adding some mock data inside this file in JSON format. It will be easier to render JSON data in the Angular app.

{
"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"
}
]
}

To serve this data to our angular application, in a separate terminal window, write the following command:

json-server --watch src/data/db.json --port 4000

You will be prompted with the following success message. Our data is accessible through the URL .


Fetching Data using HTTP Client


Fetching Data using HTTP Client

Most front-end frameworks do not have a built-in mechanism to fetch data from remote API or a server. However, Angular leverages in this case, its HTTP Client which allows us to fetch data from the remote API, in our case the JSON server data. To make use of it, first, append the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // add

import { Ng2SmartTableModule } from 'ng2-smart-table';

import { AppComponent } from './app.component';
import { TableComponent } from './table/table.component';

@NgModule({
declarations: [AppComponent, TableComponent],
imports: [
BrowserModule,
Ng2SmartTableModule,
HttpClientModule // add
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Inside the table folder, create two new files. First, Table.ts: this file works as a schema design (if you think in terms of the database) or an interface that let our Angular application know the type of data it is going to receive from the remote API. This will be helpful in creating a service, which is our next step.

export interface Table {
id: Number;
name: String;
city: String;
employeeId: String;
}

Second, is our service file table.service.ts. Our service file contains an injectable class called TableService which will fetch the data from the remote API using HTTP client.


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TableService {
  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getData() {
    return this
            .http
            .get(`${this.url}/employees`);
        }
}

Importing this service in app.module.ts as a provider which will enable our Table component to access it.

import { TableService } from './table/table.service';


// ...

providers: [TableService],

Next, we modify our table.component.ts and table.component.html.

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[];

  constructor(private tservice: TableService) {}

  ngOnInit() {
    this.tservice.getData().subscribe((data: Table[]) => {
      this.employees = data;
    });
  }
}


<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>City</th>
      <th>Employee id</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.id }}</td>
      <td>{{ employee.name }}</td>
      <td>{{ employee.city }}</td>
      <td>{{ employee.employeeId }}</td>
    </tr>
  </tbody>
</table>

If you get a similar result like below, depending on the amount of your data, this means you successfully created the Table Service and fetched the data from a remote API using HttpClient. 


Making our Table Smart


Making our Table Smart

At this point, our table is just rendering as static and does not have any functionality provided by the ng2-smart-table library such as sorting, searching, etc. To make it dynamic, we need to add some configuration, which is a required step when working with the ng2-smart-table library.

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;
    });
  }
}

The column name contains those fields that are coming from our service. The column name does not have to be identical with the original key. You can add or modify the name for a column using the title. Another thing we need to add is called source which gives reference to the actual data from our service to the ng2-smart-table directive. Yes, our last piece of the puzzle to make our table dynamic is a directive provided by ng2-smart-library called the same. See it action app.component.html and replace our previous code.

<ng2-smart-table [settings]="settings" [source]="employees">
</ng2-smart-table>

The settings are the same object that we defined in the app.component.ts. The source is coming from Table service where we fetch data and make it available to our component using this.employees. Following is how your table will look now.



Try to play with it to explore its functionalities. Notice, 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. 



It also adds sorting functionality by default. 



There are various advanced configurations that ng2 table library provide to us. For example, to add a multi-select checkbox, we can just edit the configuration or the settings object in our table component and this feature will be added to our existing table. Append table.component.ts

settings = {
selectMode: 'multi', // just add this
columns: {
id: {
title: 'ID'
},
name: {
title: 'Name'
},
city: {
title: 'City'
},
employeeId: {
title: 'Employee No.'
}
}
};


And see yourself.

 


I hope this tutorial helps you in finding ways for representing ng2-smart-tables in Angular 6. You can find the complete code for this tutorial at this Github repo.

Aman

Aman Mittal

Blog Author

Aman Mittal is a Full Stack JavaScript developer specialising in Node.js. Currently he is fascinated by the aspect of React and React Native. When he is not writing JavaScript he is a bibliophile. Website:http://www.amanhimself.me/

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

Alivia

16 November 2018 at 4:21pm
Informative and well articulated

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount