You can create a service to get the column definitions from remote server, subscribe it and then create the datagrid component. Please refer to the code below:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
<eui-datagrid *ngIf="columns" style="height:250px"
[pagination]="true"
[data]="data"
[total]="total"
[pageNumber]="pageNumber"
[pageSize]="pageSize">
<eui-grid-column *ngFor="let col of columns" [field]="col.field" [title]="col.title"></eui-grid-column>
</eui-datagrid>
`,
providers: [DataService]
})
export class AppComponent {
columns = null;
total: number = 0;
pageNumber = 1;
pageSize = 20;
data = [];
constructor(public dataService: DataService){}
ngAfterViewInit() {
this.dataService.getColumns().subscribe(columns => this.columns = columns);
this.dataService.getData().subscribe((data) => {
this.total = data.total;
this.data = data.rows;
});
}
}