igniteui-angular-sovn/src/lib/grids/toolbar/grid-toolbar-exporter.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<button [title]="grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip" [disabled]="isExporting"
    igxButton="outlined" type="button" [displayDensity]="grid.displayDensity" igxRipple #btn (click)="toggle(btn, toggleRef)">

    <igx-icon>import_export</igx-icon>
    <span #ref>
        <ng-content></ng-content>
    </span>
    <span *ngIf="!ref.childNodes.length">
        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}
    </span>
    <igx-icon>arrow_drop_down</igx-icon>
</button>

<div class="igx-grid-toolbar__dropdown" id="btnExport">
    <ul class="igx-grid-toolbar__dd-list" igxToggle #toggleRef="toggle">
        <li *ngIf="exportExcel" #btnExportExcel id="btnExportExcel"
            class="igx-grid-toolbar__dd-list-items" igxRipple (click)="export('excel', toggleRef)">
            <ng-template #excel>
                <ng-content select=[excelText],excel-text></ng-content>
            </ng-template>
            <excel-text *ngIf="!hasExcelAttr">
                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}
            </excel-text>
            <ng-container *ngTemplateOutlet="excel"></ng-container>
        </li>

        <li *ngIf="exportCSV" #btnExportCsv id="btnExportCsv" class="igx-grid-toolbar__dd-list-items"
            igxRipple (click)="export('csv', toggleRef)">
            <ng-template #csv>
                <ng-content select=[csvText],csv-text></ng-content>
            </ng-template>
            <csv-text *ngIf="!hasCSVAttr">
                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>
            <ng-container *ngTemplateOutlet="csv"></ng-container>
        </li>
    </ul>
</div>