Datatable Print Export to CSV, Excel, PDF in Angular 12

Angular 11/12 Datatable to Export data into Excel, CSV, PDF, Print and Copy example; In this tutorial, i am going to show you how to install dataTable print, copy, pdf and export execel or csv library and export in data in different format with angular 12.

DataTables is a powerful jQuery plugin for creating table listings and adding interactions to them. It provides searching, sorting and pagination without any configuration. In this article we’ll go through the basics of DataTable and how to use some of the advanced features.

Angular 12 Material Datatable Print, Export to CSV, Excel, Print, Copy And PDF Example

• Step 1 – Create New Angular App
• Step 2 – Install datatable copy export excel pdf print libarry
• Step 3 – Import Modules on Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On Component ts File
• Step 6 – Start Angular App And PHP Server

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install datatable copy export excel pdf print libarry

Install NPM package called jquery, datatables.net and bootstrap etc to implement datatable in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

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

After that, open angular.json file and update the following code into it:

"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"
           
            ]

Step 3 – Import Modules on Module.ts File

Go to src/app directory and open app.module.ts file. Then add the following code into it:

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 { }

Step 4 – Add Code on View File

Create table to display dynamic data in angular 11 app. So, visit src/app/app.component.html and update the following code into it:

<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>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of data">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>

Step 5 – Add Code On Component ts File

Go to the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data = [
    {name: 'test', email: '[email protected]', website:'test.com'},
    {name: 'test', email: '[email protected]', website:'test.com'},
    {name: 'test', email: '[email protected]', website:'test.com'},
    {name: 'test', email: '[email protected]', website:'test.com'},
];
  title = 'angulardatatables';
  dtOptions: any = {};
  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 3,
      processing: true,
      dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'print'
        ]
    };
}
}

Step 6 – Start Angular App And PHP Server

Execute the following command on terminal to start angular app:

ng serve

Recommended Angular Posts