How to bind remote data for autocomplete rendered cells in an Angular Spreadsheet?

This article explains how to bind remote data for autocomplete-rendered cells in an Angular Spreadsheet. We rendered the autocomplete component on the required column using template support. To update the autocomplete with a remote data source, bind the dataManager instance to the dataSource property.

[app.component.html]

<ejs-spreadsheet #default (created)="created()">
 <e-sheets>
   <e-sheet name="Car Sales Report">
     <e-ranges>
       <e-range [dataSource]="data"></e-range>
       <e-range address="A2:A6">
         <ng-template #template>
           <ejs-autocomplete
             #remote
             [dataSource]="autoCompleteData"
             filterType="StartsWith"
             [fields]="remoteFields"
             [query]="query"
             [placeholder]="remoteWaterMark"
             sortOrder="Ascending"
             (change)="onChange($event)"
           ></ejs-autocomplete>
         </ng-template>
       </e-range>
     </e-ranges>
     <e-columns>
       <e-column [width]="180"></e-column>
       <e-column [width]="130"></e-column>
       <e-column [width]="130"></e-column>
       <e-column [width]="180"></e-column>
       <e-column [width]="130"></e-column>
       <e-column [width]="120"></e-column>
     </e-columns>
   </e-sheet>
 </e-sheets>
</ejs-spreadsheet>

[app.component.ts]

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { getDefaultData } from './data';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import {
 getRangeIndexes,
 setCell,
 SheetModel,
 SpreadsheetComponent,
} from '@syncfusion/ej2-angular-spreadsheet';
import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

@Component({
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
 @ViewChild('default')
 public spreadsheetObj: SpreadsheetComponent;
 public data: Object[] = getDefaultData();
 //Bind the DataManager instance to dataSource property for autocomplete component.
 public autoCompleteData: DataManager = new DataManager({
   url: 'https://services.syncfusion.com/angular/production/api/Employees',
   adaptor: new WebApiAdaptor(),
   crossDomain: true,
 });
 public query: Query = new Query()
   .select(['FirstName', 'EmployeeID'])
   .take(10)
   .requiresCount();
 // Map the remote data column to fields property.
 public remoteFields: Object = { value: 'FirstName' };
 // Set the placeholder to AutoComplete input.
 public remoteWaterMark: string = 'e.g. Andrew Fuller';
 created() {
   this.spreadsheetObj.cellFormat(
     { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
     'A1:F1'
   );
   // Set the row height to the cells.
   this.spreadsheetObj.setRowsHeight(38, ['2:6']);
 }

 // Bind the change event.
 onChange(args: ChangeEventArgs): void {
   let value: string = args.value.toString();
   // Get the active sheet model.
   let activeSheet: SheetModel = this.spreadsheetObj.getActiveSheet();
   let activeCell: string = activeSheet.activeCell;
   // Get the cell indexes.
   let range: number[] = getRangeIndexes(activeCell);
   // Update the cell model.
   setCell(range[0], range[1], activeSheet, { value: value }, true);
 }
}

Refer to the working sample for additional details and implementation:Sample

Output:

For further information about this, see the documentation and demo that follows.

Documentation:

https://ej2.syncfusion.com/angular/documentation/spreadsheet/template
https://ej2.syncfusion.com/angular/documentation/auto-complete/data-binding#bind-to-remote-data

Demo:

https://ej2.syncfusion.com/angular/demos/#/material3/auto-complete/data-binding
https://ej2.syncfusion.com/angular/demos/#/material3/spreadsheet/cell-template

Conclusion

We hope you enjoyed learning about how to bind remote data for autocomplete rendered cells in an Angular Spreadsheet.

You can refer to our Angular Spreadsheet’s feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our Angular Spreadsheet example to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Spreadsheet and other Angular components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!