RamSat Code

This is the continuation of  part 2 . You must have read  part 1  to implement this. Previous Parts Part 1 — Zero Configuration Part 2 — Future enable / disable (settings) Often you might wish to initialize multiple tables with a single component. follow this article, that will helps you. Template Content Your  app.component.html  file like this. <h1>Table 1</h1> <table class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <...

This is the continuation of  part 1 . if you may not read  part 1 . please red it first. Previous Parts Part 1 — Zero configurations Disabling features that you don’t wish to use for a particular table is easily done by setting a variable in the initialization object. Configuring Datatable Settings: your  app.component.ts file  should be like this import {Component, ViewChild, OnInit} from '@angular/core'; declare var $; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ @ViewChild('dataTable') table; dataTable: any ; dtOption: any = {}; constructor (){ } ngOnInit(): void { this .dtOption = { "paging": false , "ordering": false , "info": false }; this .dataTable = $( this .table.nativeElement); this .dataTable.DataTable( this .dtOption...

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_...