Use of data table in angularjs6 & Webapi

Press Me

You need to install its dependencies before getting the latest release using NPM:

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

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


Add below code in angular-cli.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" ],

NgModule
Import the DataTablesModule at the appropriate level of your app.

import { DataTablesModule } from 'angular-datatables';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    DataTablesModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})



Angularjs Model code :




import { Component, OnInit, OnDestroy } from '@angular/core';
import { Inote } from '../note/note.model';
import { NoteServices } from '../note/note.services';
import { Subject } from 'rxjs/Subject';


@Component({
  selector: 'app-createdatatable',
  templateUrl: './createdatatable.component.html',
  styleUrls: ['./createdatatable.component.css']
})
export class CreatedatatableComponent implements OnDestroy, OnInit {
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  list: Inote[];
  constructor(private ns: NoteServices) { }
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.fill();
  }
  fill(): void {
    this.ns.Getn().then(data => {
      this.list = data;
      this.dtTrigger.next();
    });
  }
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}








Angularjs View Code :




<div style="border:1px solid #808080">
  <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover table table-bordered table-bordered table-condensed table-hover table-responsive table-striped">
  <thead class="bg bg-primary">
    <tr>
      <th>Sl No.</th>
      <th>NAME</th>
      <th>SALARY</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let c of list;let i=index">
    <td>{{i+1}}</td>
    <td>{{c.NAME}}</td>
    <td>{{c.SALARY}}</td>
    </tr>
  </tbody>
</table>
</div>