Angular 13 DataTable Print, Export to CSV, Excel Data

To print, Export data into Excel, CSV, PDF, Print, and Copy in angular 13 apps; Through this tutorial, i am going to show you how to print, copy, pdf and export excel or CSV file with dataTable in angular 13 apps.

Angular 13 Datatable Print, Export to CSV, Excel Data

Follow the below given steps to print, export csv and excel data in angular 13 apps; as follows:

  • Step 1 – Create New Angular App
  • Step 2 – Install jQuery DataTables Library
  • Step 3 – Import Modules in Module.ts File
  • Step 4 – Create HTML Table 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

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install jQuery DataTables Library

Run the following command on command prompt to install DataTable, jQuery, jszip, bootstrap and button packages:

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 in 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 – Create HTML Table on View File

Go to src/app/app.component.html and add the following code into it to display data in dataTable with buttons:

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

Run the following command on command prompt to start angular app:

ng serve

Recommended Angular Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.