Angular 8Bootstrap 4Jquery

Angular datatables with custom button event click open bootstrap modal popup

Angular datatables with custom button event click open bootstrap modal popup
Views

Hello to all, welcome to therichpost.com In this post, I will tell you, Angular datatables with custom button event click open bootstrap modal popup.

This post first part : Angular datatable with print csv excel copy buttons

anhular datatable
Angular datatables with custom button event click open bootstrap modal popup
angular datatable
Angular datatables with custom button event click open bootstrap modal popup

Post Working

In this post, I am adding custom button(details) in my datatable and when I will click on that button then I will get the popup with user details.
To all this action perform, I used jquery and bootstrap also.

Here are complete steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. After done with above, you need to run below commands to set bootstrap, datatable, jquery environment into your angular 8 application:

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
npm install datatables.net-buttons --save
npm install datatables.net-buttons-dt --save
npm install @types/datatables.net-buttons --save-dev
npm install jszip --save
            

 

3. Now you need to add below code into your 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",
            "node_modules/jszip/dist/jszip.js",
            "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
            "node_modules/datatables.net-buttons/js/buttons.colVis.js",
            "node_modules/datatables.net-buttons/js/buttons.flash.js",
            "node_modules/datatables.net-buttons/js/buttons.html5.js",
            "node_modules/datatables.net-buttons/js/buttons.print.js"
           
            ]
...

 

4. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {DataTablesModule} from 'angular-datatables';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Now you need to add below code into your src/app/app.component.ts file:

import { Component, OnInit } from '@angular/core';
declare var $: any 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'Ajay', email: 'test@gmail.com', website:'test.com'},
    {name: 'Alisha', email: 'test@gmail.com', website:'test.com'},
    {name: 'Jassa', email: 'test@gmail.com', website:'test.com'},
    {name: 'Jas', email: 'test@gmail.com', website:'test.com'},
];

  title = 'angulardatatables';
  dtOptions: any = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 3,
      processing: true,
      dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'print'
        ]
    };
   $(document).on( 'click', '.getDetails', function () {
      $(".username").text("");
      $(".username").text($(this).parents("tr").find(".fname").text());
     $("#myModal").modal('show');
  } );
}
}

 

5. Now you need to add below code into src/app/app.component.html file:

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    <th>Details</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td class="fname">{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     <td><button class="getDetails">Details</button></td>
     </tr>
  </tbody>
</table>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">User Name</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      
      <!-- Modal body -->
      <div class="modal-body">
        Hi : <span class="username"></span>
      </div>
      
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
      
    </div>
  </div>
</div>

 

In the end, don’t forgot to run ng serve command. If you have any query then do comment below. In next part of this post, I will get the dynamic data and show in datatable with angular httpclient.

Jassa

Thank you.

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

1 Comment

Leave a Reply

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

Positive SSL