How to load data into excel from Angular 4
I am creating an angular application in which I need to export table data to an excel file. I have a ride success component, inside which I have a table that displays the data received through the angular service. Now I need to load this table data into an excel file from my browser.
ridesuccess Component: -
export class RideSuccessComponent implements OnInit {
p = 1;
myForm: FormGroup;
rideSuccess: RideSuccess[];
rsuccess: RideSuccess = '';
constructor(private adminService: AdminService) {}
ngOnInit() {
this.rsuccess = '';
this.adminService.getRideSuccess()
.subscribe(
(rideSuccess: RideSuccess[]) => {
this.rideSuccess = rideSuccess;
}
);
ridesuccess HTML: -
<table class="responstable" id="responsetable">
<tr>
<th data-th="Driver details"><span>Driver name</span></th>
<th>Rider Name</th>
<th>Pool ID</th>
<th>Amount</th>
<th>Source</th>
<th>Destination</th>
<th>Sum ID</th>
<th></th>
</tr>
<tr *ngFor="let ridesuccess of rideSuccess| paginate: { itemsPerPage: 5, currentPage: p }; let i = index" >
<td>{{ridesuccess.driverName}}</td>
<td>{{ridesuccess.riderName}}</td>
<td>{{ridesuccess.poolId}}</td>
<td>{{ridesuccess.amount}}</td>
<td>{{ridesuccess.source}}</td>
<td>{{ridesuccess.destination}}</td>
<td>{{ridesuccess.sumId}}</td>
<td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" (click)="setmodal(ridesuccess)">Gratify</button></td>
</tr>
</table>
<pagination-controls (pageChange)="p = $event" class="my-pagination" style="float: right"></pagination-controls>
Now I want to implement a button in HTML that, when clicked, will load the complete table data into an excel file.
NOTE. - I have all data in my angular service ( getRideSuccess () ). I want to load data from my angular object which is populated with a service ( getRideSuccess () ).
Package.json: -
{
"name": "pagination",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
},
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.0",
"@angular/router": "^4.0.0",
"@angular/upgrade": "^4.0.0",
"angular2-bootstrap-confirm": "^1.0.4",
"angular2-csv": "^0.2.5",
"bcryptjs": "^2.4.3",
"body-parser": "~1.15.2",
"chart.js": "^2.5.0",
"cookie-parser": "~1.4.3",
"core-js": "^2.4.1",
"debug": "~2.2.0",
"express": "~4.14.0",
"hbs": "~3.1.0",
"jsonwebtoken": "^7.4.0",
"mongoose": "^4.9.6",
"mongoose-sequence-plugin": "^1.0.5",
"mongoose-unique-validator": "^1.0.5",
"morgan": "~1.6.1",
"ng2-charts": "^1.5.0",
"ngx-pagination": "^3.0.1",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.2.0",
"serve-favicon": "~2.3.0",
"shortid": "^2.2.8",
"zone.js": "^0.8.5"
},
"devDependencies": {
"@types/core-js": "0.9.36",
"@types/node": "^6.0.45",
"angular-router-loader": "^0.5.0",
"angular2-template-loader": "^0.5.0",
"awesome-typescript-loader": "^3.1.2",
"del-cli": "^0.2.0",
"html-loader": "^0.4.4",
"raw-loader": "^0.5.1",
"ts-loader": "^2.0.3",
"typescript": "^2.1.4",
"webpack": "^2.2.1",
"webpack-merge": "^4.1.0"
},
"main": "app.js",
"author": "",
"license": "ISC",
"description": ""
}
source to share
You may need a library for this angular2-csv
.npm install --save angular2-csv
import { Angular2Csv } from 'angular2-csv/Angular2-csv';
export class RideSuccessComponent implements OnInit {
...
rideSuccess: RideSuccess[];
...
exportData() {
new Angular2Csv(this.rideSuccess, 'My Report');
}
...
}
Then just call the function exportData
whenever you want. More information here .
source to share
I was able to do this using the DataTableModule provided by PrimeNG's DataTableModule Example .
Regarding the Angular2Csv issue, I found that when installing the module, it highlights UNMET PEER DEPENDENCY angular 4.3.3 . However, I am using Angular 4.0.0 for development. The latest version of Angular2Csv seems to require 4.3.3 hence the bugs.
source to share