Angular 11/12 Datatable to Export data into Excel, CSV, PDF, Print and Copy. In this tutorial, you will learn how to print, copy, pdf and export execel or csv file with datatable in angular 11/12.
And also, this tutorial will show you simple working example of how to integrate datatables in angular 11 app. And using third party api fetch all post data from it and display in table format using datatable in angular 11 app.
As well as, you can use modify and use another api for fetch and display data in datatable with angular 11 app.
Angular 12/11 Material Datatable Print, Export to CSV, Excel, Print, Copy And PDF Example
- Step 1 – Create New Angular App
- Step 2 – Add Code on Module.ts File
- Step 3 – Add Code on View File
- Step 4 – Add Code On Component ts File
- Step 5 – 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
Then 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 2 – Add Code on Module.ts File
In this step, 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 3 – Add Code on View File
In this step, 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 4 – Add Code On Component ts File
In this step, 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'
]
};
}
}
If you want to display dynamic data in angular 11 app. So, you can checkout this Angular 12 Datatable Display Dynamic Data Example.
Step 5 – Start Angular App And PHP Server
In this step, execute the following command on terminal to start angular app:
ng serve
