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

This knowledge base article explains you how to bind remote data for autocomplete rendered cells in an Angular Spreadsheet. We rendered the autocomplete component on the required column by using template support. In order 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);
 }
}

Stackblitz Sample: https://stackblitz.com/edit/angular-8blne1-gyz1eh?file=src%2Fapp.component.ts,src%2Fapp.component.html

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
I 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, Direct-Trac, or feedback portal. We are always happy to assist you!