how to change label_btn text ?

[wohugb]

No description provided.

[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';
  }