Angular 14 Datatable Print, Export to CSV, Excel Data

Angular 14 Datatable to Export data into Excel, CSV, PDF, Print, and Copy. In this tutorial, we will learn how to print, copy, pdf and export excel or CSV file with dataTable in angular 14.

Angular 14 Datatable Print, Export to CSV, Excel Data

Use the following steps to data table print, export csv and excel data in angular 14 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

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 jQuery DataTables Library

Then install NPM package called jquery, datatables.net and bootstrap etc to implement datatable in angular apps. 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 in Module.ts File

Visit 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

Create table to display dynamic data in angular apps. 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

Visit 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

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended Angular Tutorials