Angular Excel Export Data Binding

Updated on Oct 1, 2026

The Excel Export component exports the collection assigned to its 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 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.

Example

View Source

Loading ...

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

<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

public products: Product[] = [];

constructor(private productsService: ProductsService) {}

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

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.

Example

View Source

Loading ...

When a remote service returns data in pages, request the complete collection before calling save(). For Grid-specific server paging and the fetchData callback, see 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

<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

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.

Example

View Source

Loading ...

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
• Saving Files on the Server
• Excel Export API Reference