Angular 16 DataTables Print, Export to CSV, Excel, PDF Data Tutorial

[ad_1]

jQuery Datatable in angular 16; In this tutorial, You will learn how to print, copy, pdf and export excel or CSV file with button in angular 16 apps using dataTables.

Angular 16 DataTables Print, Export to CSV, Excel, PDF Data Tutorial

Steps to create a button for print, copy, and export CSV, PDF, Excel data using jQuery dataTables in angular 16 apps; as follows:

Step 1 – Create New Angular App
Step 2 – Install and Configure DataTables.net
Step 3 – Import Modules in Module.ts File
Step 4 – Create HTML Table on View File
Step 5 – Add Print and Export Functionality
Step 6 – Run the Application

Step 1 – Create New Angular App

If you haven’t already, you’ll need to install Angular CLI to create a new Angular project. Open your terminal or cmd and run the following commands:

ng new my-new-app

Step 2 – Install and Configure DataTables.net

Once you have created angular project into your system. Next, you need to install DataTables.net and its dependencies using npm.

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 the angular.json file and update the following code in 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

Next, visit to src/app directory and open app.module.ts file. Then add the following code to 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

Then, 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 Print and Export Functionality

In order to add print and export functionality, we need to include the DataTables.net Buttons extension. Update the app.component.ts file as follows:

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 – Run the Application

Finally, run the following command on the terminal or cmd to start angular app:

ng serve

Visit http://localhost:4200 in your web browser to see the DataTable with print and export functionality.

Conclusion

That’s it; You learned how to print, copy, pdf and export excel or CSV file in angular 16 apps using dataTables.