jqwidgets-scripts-custom/demos/Angular/treegrid/dataexport/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxTreeGrid [theme]="'material'"
             [width]="getWidth()"
             [source]="dataAdapter"
             [columns]="columns"
             [ready]="ready"
             [exportSettings]="exportSettings"
             #TreeGrid>
</jqxTreeGrid>

<div style="margin-top: 20px;">
  <div style="float: left;">
    <jqxButton [theme]="'material'" #excelExport (onClick)="excelExportClick()">Export to Excel</jqxButton>
    <br />
    <br />
    <jqxButton [theme]="'material'" #xmlExport (onClick)="xmlExportClick()">Export to XML</jqxButton>
  </div>
  <div style="float: left; margin-left: 10px;">
    <jqxButton [theme]="'material'" #csvExport (onClick)="csvExportClick()">Export to CSV</jqxButton>
    <br />
    <br />
    <jqxButton [theme]="'material'" #tsvExport (onClick)="tsvExportClick()">Export to TSV</jqxButton>
  </div>
  <div style="float: left; margin-left: 10px;">
    <jqxButton [theme]="'material'" #htmlExport (onClick)="htmlExportClick()">Export to HTML</jqxButton>
    <br />
    <br />
    <jqxButton [theme]="'material'" #jsonExport (onClick)="jsonExportClick()">Export to JSON</jqxButton>
  </div>
  <div style="float: left; margin-left: 10px;">
    <jqxButton [theme]="'material'" #pdfExport  (onClick)="pdfExportClick()">Export to PDF</jqxButton>
  </div>
</div>