projects/web-mev/src/app/d3/components/download-button/download-button.component.ts
Download Button Component
Used in D3 charts for downloading svg image
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-download-button |
| styleUrls | ./download-button.component.scss |
| templateUrl | ./download-button.component.html |
Methods |
Inputs |
constructor()
|
| containerId | |
| imageName | |
| onSaveImage |
onSaveImage()
|
|
Function to download the svg image
Returns :
void
|
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import * as svgAsPng from 'save-svg-as-png';
/**
* Download Button Component
*
* Used in D3 charts for downloading svg image
*/
@Component({
selector: 'mev-download-button',
templateUrl: './download-button.component.html',
styleUrls: ['./download-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DownloadButtonComponent {
@Input() containerId;
@Input() imageName;
constructor() {}
/**
* Function to download the svg image
*/
onSaveImage() {
svgAsPng.saveSvgAsPng(
document.querySelector(this.containerId + ' svg'),
this.imageName
);
}
}
<button mat-button color="accent" (click)="onSaveImage()" title="Click to download the image">
<mat-icon>save_alt</mat-icon>
</button>
./download-button.component.scss
button {
float: right;
position: relative;
top: 30px;
}