how to change label_btn text ?

[StevenFewster]

You can override the template by creating your own component that extends the angular2csv component.

Original template: <button (click)=\"onDownload()\">{{ label_btn }}</button>

My implementation is as follows:

/**
  *  ng generate component /src/shared/components/angular2csv
  *  File: /src/shared/components/angular2csv.component.ts
  */ 
import { Component } from '@angular/core';
import { Angular2CsvComponent } from 'angular2-csv';

@Component({
  selector: 'app-angular2csv',
  template: '<div (click)=\"onDownload()\"><ng-content></ng-content></div>'
})
export class CustomAngular2csvComponent extends Angular2CsvComponent {}

Then in your template, rather than use

<!-- app.component.html -->
<angular2csv [data]="CSV_DATA" [filename]="CSV_FILE" [options]="CSV_OPTIONS"></angular2csv>

You can instead use:

<!--- app.component.html -->
<app-angular2csv [data]="CSV_DATA" [filename]="CSV_FILE" [options]="CSV_OPTIONS">
          <!--any html/text to be placed between clickable div tags-->
          <button type="button" class="btn btn-secondary"><span class="fa fa-download"></span> Download Template</button>
           <!-- end any html -->
</app-angular2csv>

<!-- OR -->

<app-angular2csv [data]="CSV_DATA" [filename]="CSV_FILE" [options]="CSV_OPTIONS">
    {{ my_button_text }}
</app-angular2csv>

and whatever is between the app-angular2csv tags will be replaced with your content.

EDIT Have added some extra detail, where app.component.html is the component you were going to add angular2csv to, but are now going to use app-angular2csv (as per the naming in /src/shared/components/angular2csv), yours may be different depending on your angular-cli set up.

The rest of the usage is as per angular2-csv documentation and standard @angular

[Gaetane]

Thanks for the work around ! But it would be great to include something like this by default, at least for internationalization purpose.

[julurivinay]

Hi, Can we change by using any properties or options here.

[StevenFewster]

I hoped to fork this and add it to the options as labelText and fiddling with the code but to no avail.

As it's all "built", compiled, minified etc. and I don't have access to the original files I'm unable to do much with it. Hopefully the original author will be able to implement in the next release.

[subbiahmca]

You can override the template by creating your own component that extends the angular2csv component.

Original template: <button (click)=\"onDownload()\">{{ label_btn }}</button>

My implementation is as follows:

import { Component } from '@angular/core';
import { Angular2CsvComponent } from 'angular2-csv';

@Component({
  selector: 'app-angular2csv',
  template: '<div (click)=\"onDownload()\"><ng-content></ng-content></div>'
})
export class CustomAngular2csvComponent extends Angular2CsvComponent {}

Then in your template, rather than use <angular2csv [data]="CSV_DATA" [filename]="CSV_FILE" [options]="CSV_OPTIONS"></angular2csv>

You can instead use:

<app-angular2csv [data]="CSV_DATA" [filename]="CSV_FILE" [options]="CSV_OPTIONS">
          <button type="button" class="btn btn-secondary"><span class="fa fa-download"></span> Download Template</button>
</app-angular2csv>

and whatever is between the app-angular2csv tags will be replaced with your content.

how to use this code in exists components

[patilNik]

Thanks @StevenFewster it works for me but it increases product size when creating a new component for it.

[turneye]

You can also achieve this with a little CSS hackery

Given markup in my.component.html

  <angular2csv [data]="exportData" filename="bookings" [options]="exportOptions"></angular2csv>

The following CSS in my.component.css will change the button text

/deep/ angular2csv > button {
    color: transparent;  /* hides 'download' label */
    line-height: 0;      /* Collapse the original line */
}

/deep/ angular2csv > button::after {
    content: "Export to CSV";   /* new button label */
    color: #333333;             /* color so we can see it */
    display: block;
    line-height: initial;       /* New content takes up original line height */
}

Could probably do this in global CSS files too, assuming you want to use the same label on every angular2csv button.

Hope that helps.

[brunto]

This is not the most beautiful solution but you can also do:

  ngAfterViewChecked() {
    document.querySelector('angular2csv > button').innerHTML = 'Export to CSV';
  }