ANGULAR 5 : how to export data to csv file

I am beginner in angular and I am working on Angular 5, Node v8.11.3.

I want to realize a generic function that takes in parameter data and headers. And as output a csv file.

I create a component called ' FactureComponent ' Then I generate a service called ' DataService ' then I create a getFactures function that retrieves a list of my items from a mock and it works very well.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { FACTURES } from '../mock.factures';

@Component({
selector: 'app-facture',
templateUrl: './facture.component.html',
styleUrls: ['./facture.component.scss']
})
export class FactureComponent implements OnInit {

factures = [];
columns = ["Id","Reference","Quantite","Prix Unitaire"];
btnText: String = "Export CSV";

constructor(private _data: DataService) { }

ngOnInit() {
this.getFactures();
}
getFactures(){
this.factures=this._data.getFactures();
}
generateCSV(){
console.log("generate");
}
}


you will find below the view

<form>
<input type="submit" [value]="btnText" (click)="generateCSV()"/>
</form>

<table>
<tr>
<th *ngFor="let col of columns">
{{col}}
</th>
</tr>
<tr *ngFor="let facture of factures">
<td>{{facture.id}}</td>
<td>{{facture.ref}}</td>
<td>{{facture.quantite}}</td>
<td>{{facture.prixUnitaire}}</td>
</tr>
</table>


So I want to realize a function that converts my data displayed on the view into a csv file.

Continue reading...