# Angular Excel Export Data Binding

The Excel Export component exports the collection assigned to its [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/excel-export/api/excelexportcomponent#data) input. Bind a local collection directly, or retrieve data from a remote service before you export it.

## Binding to Local Data

Use a local array when the data is already available in your application. Bind the collection to the `data` input, then define [`kendo-excelexport-column`](https://www.telerik.com/kendo-angular-ui-develop/components/excel-export/api/columncomponent) elements for the fields that you want to export.

```html
<kendo-excelexport [data]="products" fileName="Products.xlsx" #excelExport>
    <kendo-excelexport-column field="ProductID" title="Product ID">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="ProductName" title="Product Name">
    </kendo-excelexport-column>
</kendo-excelexport>
```

The following example demonstrates how to export a local collection.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/excel-export/data-binding/local-data/source.txt)

## Binding to Remote Data

You can bind the Excel Export component to data from a backend service, REST API, or another remote source. Retrieve the data through `HttpClient` or your application's data-access layer, then assign the received collection to the `data` input. The component exports the collection that is currently assigned to `data`.

```html app.component.html
<button kendoButton type="button" (click)="excelExport.save()">Export to Excel</button>

<kendo-excelexport [data]="products" fileName="Products.xlsx" #excelExport>
    <kendo-excelexport-column field="ProductID" title="Product ID"></kendo-excelexport-column>
    <kendo-excelexport-column field="ProductName" title="Product Name"></kendo-excelexport-column>
    <kendo-excelexport-column field="UnitPrice" title="Unit Price"></kendo-excelexport-column>
</kendo-excelexport>
```

```ts app.component.ts
public products: Product[] = [];

constructor(private productsService: ProductsService) {}

public ngOnInit(): void {
    this.productsService.getProducts().subscribe({
        next: (products) => {
            this.products = products;
        }
    });
}
```

```ts products.service.ts
interface ODataResponse<T> {
    value: T[];
}

@Injectable()
export class ProductsService {
    private readonly productsUrl = 'https://demos.telerik.com/service/v2/odata/Products?$top=30';

    constructor(private http: HttpClient) {}

    public getProducts(): Observable<Product[]> {
        return this.http.get<ODataResponse<Product>>(this.productsUrl).pipe(
            map((response) => response.value)
        );
    }
}
```

The following example demonstrates how to export a collection retrieved from a remote service.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/excel-export/data-binding/remote-data/source.txt)

When a remote service returns data in pages, request the complete collection before calling [`save()`](https://www.telerik.com/kendo-angular-ui-develop/components/excel-export/api/excelexportcomponent#save). For Grid-specific server paging and the `fetchData` callback, see [Exporting Data from Remote Sources](https://www.telerik.com/kendo-angular-ui-develop/components/grid/export/excel-export#exporting-data-from-remote-sources).

### Mapping Remote Data Fields

When the fields are known only after the remote service responds, use the received collection to create the Excel Export columns.

```html app.component.html
<button kendoButton type="button" (click)="excelExport.save()">Export to Excel</button>

<kendo-excelexport [data]="products" fileName="Products.xlsx" #excelExport>
    @for (field of fields; track field) {
        <kendo-excelexport-column [field]="field" [title]="field">
        </kendo-excelexport-column>
    }
</kendo-excelexport>
```

```ts app.component.ts
public products: Product[] = [];
public fields: string[] = [];

public ngOnInit(): void {
    this.productsService.getProducts().subscribe({
        next: (products) => {
            this.products = products;
            this.fields = Object.keys(products[0] ?? {});
        }
    });
}
```

The following example demonstrates how to create export columns from the fields of a remote data source.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/excel-export/data-binding/dynamic-columns/source.txt)

Use this approach when every data item has the same fields. Use a server-provided schema or an explicit column mapping when you need custom titles, column order, hidden fields, or formatting.

## Using Related Resources

* [Excel Export Columns](https://www.telerik.com/kendo-angular-ui-develop/components/excel-export/columns)
* [Saving Files on the Server](https://www.telerik.com/kendo-angular-ui-develop/components/excel-export/saving)
* [Excel Export API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/excel-export/api)