Instantly share code, notes, and snippets.

@amandeepmittal /blog.md Secret
Created Aug 9, 2018

Embed
What would you like to do?

Smart Tables 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.

https://gist.github.com/e84312ce49735eee70856d8ce1610530

If you already are 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 take care of pre-configuration that is needed to an application. With the below command we generate our new project:

https://gist.github.com/81ea6423cd203d59e75e7452b539d0fb

To see of 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.

ss1

Installing rxjs-compat

Angular's ecosystem struggles because of the compatibility issues of thrid 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.

https://gist.github.com/e4dd609fd48691af9c2ec7c358c8ce53

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

Install ng2-smart-table library

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

https://gist.github.com/01293a8c2f9a5c14f7d688815479d05e

In any Angular application, app.module.ts is the global space for registering a module. Open it and add the following:

https://gist.github.com/bf6af62ae77a27b829fd3ca114f55460

If you get no errors and the webpack has compiled our app successfully, this mean 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 fine our newly generated component inside src/app/. To see if it is working, we will import this table component inside app.component.ts.

https://gist.github.com/e75908914cd09106476914ecf277758e

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

undefined

ss2

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.

https://gist.github.com/d4035ba014ca315927a20f792ea1cc49

Now in our src/ directory, create 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 angular app.

https://gist.github.com/79e027897564921110ea00245e9aaf0f

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

https://gist.github.com/45a1a409cc6172ef5ae7d54bd1984734

You will be prompted with the following success message. Our data is accessbile through the URL http://localhost:4000/employees.

ss3

Fetching Data using HTTP Client

Most front end framework 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.

https://gist.github.com/3c06c52186814e3ef9e24ad904232e84

Inside the table folder, create two new files. First, Table.ts: this file works as an schema design (if you think interms of 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.

https://gist.github.com/83f1b752bfc94dad3a461abd02530124

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

https://gist.github.com/d4af2141f5bc2fb4e4a56b17c6c70cf5

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

https://gist.github.com/81aa4b4542482c6fe69fef5bc2b8b52e

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

https://gist.github.com/2c96c7bb5d56707e878518b02f47971b

https://gist.github.com/c553b6d8984cdfafadf0799b8e2f972e

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.

ss4

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 require step when working with ng2-smart-table library.

Create an object inside table.component.ts and call it settings. This object contain columns that are displayed on the table.

https://gist.github.com/49aae2db5fc0c7900252004cfd9ffcf0

The column name contain those fields that are coming from our service. The column name do not have to be identical with the orginial key. You can add or modify the name for a column using title. Another thing we need to add is called source which gives reference to of the actual data from our service to the ng2-smart-table directive. Yes, our list piece of 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.

https://gist.github.com/ff51db1d4dfcf495c1cd07c857f647f5

The settings is the same object that we defined in the app.component.ts The source is comping 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.

ss5

Try to play with it to explore its functionalities. Notice, how it automatically adds the compatibilites to edit and update or delete a field as well add a search bar over every column.

ss6

It also add sorting functionality.

ss7

There are various advance configuration 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

https://gist.github.com/8c1ce9ba284cd3c6dc8c747ca5898430

And see yourself.

ss8

I hope this tutorial will be benefical in you getting started with ng2-smart-tables. You can find the complete code for this tutorial at this Github repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment