Integrate Data table with Angular 8 Application With JSON backend

WebSite | YouTube

DataTables is a plug-in for the JQuery JavaScript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Create Project:

Create a new project using angular CLI generator. using the following command to create new project.

ng new angularDatatable

Install Dependencies:

Install the following dependencies using npm.

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

project Configuration:

you need to import the jquery and datatable scripts files into angular.json file. Into the styles section you need to import CSS files. Into the script section you need to import JS files. Example code is given below.

angular.json

"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]

create a new component using the following command

ng generate component Jsondata

Your component template should be like the following

<table #dataTable class="display" style="width:100%">
</table>

Create a modal using the following command

ng g m resDataModal

Create a new service using the following command

ng g s Datasource

After creating this your folder structure like this

Your Modal file be like this

resDataModal.ts

export interface ResDataModal {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: [];
}

Your service file should like this

datasource.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {ResDataModal} from '../modals/resDataModal';

@Injectable({
  providedIn: 'root'
})
export class DatasourceService {
  apiUrl = 'https://reqres.in/api/users?page=2';

  constructor(private http: HttpClient) { }

  getData(): Observable<ResDataModal> {
    return this.http.get<ResDataModal>(this.apiUrl);
  }
}

Your component file be like this

import {Component, OnInit, ViewChild} from '@angular/core';
import {DatasourceService} from '../services/datasource.service';
declare var $;
@Component({
  selector: 'app-json-data',
  templateUrl: './json-data.component.html',
  styleUrls: ['./json-data.component.scss']
})
export class JsonDataComponent implements OnInit {

  dataTable: any;
  dtOptions: any;
  tableData = [];
  @ViewChild('dataTable', {static: true}) table;

  constructor(private dataService: DatasourceService) { }

  ngOnInit() {
    this.getDataFromSource();
  }

  getDataFromSource() {
    this.dataService.getData().subscribe(data => {
      this.tableData = data.data;
      this.dtOptions = {
        data: this.tableData,
        columns: [
          {title: 'ID', data: 'id'},
          {title: 'Email', data: 'email'},
          {title: 'First Name', data: 'first_name'},
          {title: 'Last Name', data: 'last_name'},
          {title: 'Avatar', data: 'avatar'},
        ]
      };
    }, err => {}, () => {
      this.dataTable = $(this.table.nativeElement);
      this.dataTable.DataTable(this.dtOptions);
    });
  }

}