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 16 apps.
Angular 16 Datatable Print, Export to CSV, Excel Data
Follow the below given steps to print, export csv and excel data in Angular 16 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