Simple Angular DataTable Example with Angular 4

jQuery datatable is very popular and featured jQuery grid plugin.This angular tutorial help to integrate jQuery datatable with angular 4.Angular 4 is updated version of angular 2.I will use angular CLI to create Sample angular 4 application file structure and HTTP module to get data from rest api call.I have already shared tutorial for jQuery Datatable with PHP and MySQL and Angular Datatable Pagination, Sorting and Searching Using Ajax.

You can get more information about angularjs datatable on Official Website.Angular Datatable is a angular module that provide datatable directive along with jQuery datatable options like pagination,sorting,child rows and searching.

I am using HTTP GET rest call to get all posts data from server side and display into datatable with searching,sorting and pagination.Angular 4 is using TypeScript which will help to write code in object-oriented manner using reusable classes and can import other application files as well.

How To Install Angular CLI

You need to make sure, You must have node version above 6.9 and npm version above 3.You can verify node version by using node --version and npm --version.You can install angularjs command line using below code.

npm install -g @angular/cli

-g installs the angular CLI globally on your system.

How To Create Angular 4 Using CLI

I have already installed angular 4 cli using above steps, Now I will create simple jQuery datatable listing example using angular 4 CLI.

ng new sample-ng-app

You can replace sample-ng-app with the desired name of your project (without spaces and underscore).The above command will generate all of your project files and installed all of the node modules required for the project.

The Angular 4 file structure are:

src/
—- app/
——– app.component.ts
——– app.component.spec.ts
——– app.module.ts
——– app.component.html
—- main.ts
—- index.html
—- package.json
—- .angular-cli.json
—- (… some other files)

Where files are:

  • package.json : This file will have all npm package information which are required for this application.
  • angular-cli.json : This file will use to add all thrid party css and js files.
  • app.component.ts : This file used to register other module.
  • app.module.ts : This file used to import all application module.
  • app.component.spec.ts : This file used for unit tests.
  • app.component.html : This file used for all html element which will show into UI.
  • index.html : This file is main entry file.
  • main.ts : This file is use for bootstrapping application.It loads everything and controls the startup of the application.

Simple Datatable Listing with Pagination and Sorting in Angularjs 4

We have create 'sample-ng-app' angular 4 application using CLI and now integrate angular datatable with in this project.I will include all js and css dependent files of jQuery datatable.

Step 1: We will add datatable modules into package.json file under dependencies json object.

Step 2: We will add datatable modules into package.json file under devDependencies json object.
"@types/datatables.net": "^1.10.6",

Step 3: We will updated packages information using npm install command.

d:/sample-ng-app> npm install

Step 4: I will include all js and cs file .angular-cli.json file otherwise need to include file into index.html head section.

Step 5: I will add dependencies modules into app.module.ts file.

Step 6: I will add datatable modules into app.componenet.ts file.

Step 7: I have injected dependency modules and will create a HTTP request to get all datas from server using rest call.I will store data into a varaible which will use later on html file to iterate records.

Step 8: Finally, We will bind data into HTML table.I will add below HTML UI into app.component.html file.

Conclusion :

I have learned basic of angular 4 and install CLI to create angular 4 application using command line.I have also describe the files structures and basic uses of files, Integrated jQuery datatable with angular 4 application using angular datatable components.