Angular 9Datatable

Angular 9 Datatables with custom checkbox selection

angular 9 datatables with custom checkbox selection
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatables with custom checkbox selection.

Angular 9 has just launched and it is in very high in demand. Angular 9 increased his performance speed. I am showing the data in Datatables with custom json data and also for giving good look to datatable, I have used bootstrap in it, here is the working picture and don’t forget to install latest node version.


angular 9 datatables with custom checkbox selection
angular 9 datatables with custom checkbox selection

Here is the complete working code and use this carefully:

1. Here are the basics commands, you need to run for latest angular 9 setup and environment:

$ npm install -g @angular/cli

$ ng new angulardatatables

$ cd angulardatatables

$ ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

 

2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:

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

npm install ngx-bootstrap bootstrap --save

 

3. After done with commands add below code into you angular.json file:

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

 

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

5. Now add below code into app.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-datatables',
  templateUrl: './datatables.component.html',
  styleUrls: ['./datatables.component.css']
})
export class DatatablesComponent implements OnInit {
 public data = [
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'ajay', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
];
dtOptions: DataTables.Settings = {};

  constructor() { }
  isChecked = false;
  checkuncheckall()
  {
    if(this.isChecked == true)
  {
  this.isChecked = false;
  }
  else
  {
  this.isChecked = true;
  }
  
  }

  ngOnInit(): void {
  this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true
    };
  }

}

 

 

6. Now add below code into app.component.html file:

<!-- Begin Page Content -->
        <div class="container-fluid">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Datatables</h1>
          </div>    


          <!-- Content Row -->

          <div class="row">
      
      <table width="100%" class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions" style="width:100%">
        <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Website</th>
          <th><input type="checkbox" name="websitecheck" (click) = "checkuncheckall()"> select All</th>
        </tr>
        </thead>
        <tbody>
         <tr *ngFor="let group of data">
           <td>{{group.name}}</td>
           <td>{{group.email}}</td>
           <td>{{group.website}}</td>
           <td><input type="checkbox" name="websitecheck" [checked]="isChecked" value="{{group.website}}"></td>
         </tr>
        </tbody>
      </table>
      </div>
         
        </div>
        <!-- /.container-fluid -->
    <style>
    .dataTables_wrapper{width:100%;}
    </style>

 

 

Don’t forget to run ng serve command to see final output.

Jassa Jatt

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL