Complex column as foreign key column in Angular Grid component

You can configure a complex column, such as a nested property, to act as a foreign key column in the Syncfusion Angular Grid. This allows displaying and binding data from a related foreign data source, using complex field paths for scenarios involving nested data.

The following example demonstrates setting Employee.EmployeeID as a complex column and declaring it as a foreign key column. In this setup, the grid displays the FirstName field from the associated foreign data.

app.component.ts

import { data, employeeData } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ForeignKeyService, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule],
    providers: [ForeignKeyService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='315'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='Employee.EmployeeID' headerText='Employee Name'
                         width=120 foreignKeyValue='FirstName' foreignKeyField='EmployeeID' [dataSource]='employeeData'></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' width=80></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=130  ></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public employeeData?: object[];

    ngOnInit(): void {
        this.data = data;
        this.employeeData = employeeData;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));