In this article, we\u2019ll walk you through building a clean, efficient master-detail interface using Ignite UI for Angular<\/a>. We’ll explore its powerful Grid component<\/a> and its built-in support for nested templates using igxGridDetail, helping you display hierarchical data with minimal setup and high performance. <\/p>\n\n\n\n A Master-Detail Layout (also known as parent-child or expandable rows) is a design pattern where a top-level list (master) allows users to expand items to reveal related information (detail). Common examples include: <\/p>\n\n\n\n This pattern enhances usability by reducing screen clutter while providing access to deeper data when needed. <\/p>\n\n\n\n Before diving into the master-detail implementation, let\u2019s set up a clean Angular workspace for our demo. <\/p>\n\n\n\n 1. Create a New Angular Project<\/strong> <\/p>\n\n\n\n If you don\u2019t already have an Angular workspace ready, create one using the Angular CLI<\/a>. Open this project in your preferred IDE or editor to begin. <\/p>\n\n\n\n 2. Add Ignite UI for Angular<\/strong> <\/p>\n\n\n\n Ignite UI for Angular offers powerful UI components, including the igxGrid we\u2019ll use for the master-detail layout. Here’s how to add it.<\/p>\n\n\n\n 3. Generate a Dedicated Demo Component<\/strong> <\/p>\n\n\n\n To keep your master-detail example modular, generate a dedicated Angular component. <\/p>\n\n\n\n 4. Configure Routing for the Demo<\/strong> <\/p>\n\n\n\n To simplify navigation, replace your existing app.routes.ts (or your routing module) with a minimal setup that redirects to your demo component by default: <\/p>\n\n\n\n Before we build the master-detail layout, it\u2019s essential to prepare your data. This ensures your grid components have meaningful content to display and can efficiently fetch related detail data as users interact with the UI. <\/p>\n\n\n\n You can use any data source with Ignite UI for Angular: <\/p>\n\n\n\n In this example, we\u2019ll integrate with a custom Northwind Swagger API. The concepts remain the same regardless of your data source structure. <\/p>\n\n\n\n 1. Define Your Models<\/strong> <\/p>\n\n\n\n To enforce type safety and clarity, define TypeScript interfaces representing the data shapes in a dedicated models.ts file. <\/p>\n\n\n\n 2. Create a Data Service<\/strong> <\/p>\n\n\n\n Centralize all data-fetching logic in an Angular service, e.g., northwind-swagger.service.ts. Here\u2019s a sample service that interacts with a custom Northwind API, which we\u2019ll use in this example, and includes basic error handling: <\/p>\n\n\n\n With your models and service prepared, the grid components can now bind directly to arrays of orders per selected customer. From here, we\u2019ll move on to designing the Master Grid and progressively add detail views, custom templates, and performance optimizations. <\/p>\n\n\n\n Now that our data service is ready, it\u2019s time to build the master-detail UI step by step. We\u2019ll start by selecting a customer, displaying their orders in a master grid, and then enhancing the grid with a customizable detail template. <\/p>\n\n\n\n 1. Adding a Combo to Select Customers<\/strong> <\/p>\n\n\n\n To allow users to pick a customer, we\u2019ll use the igx-simple-combo component that asynchronously loads customer data from the service. <\/p>\n\n\n\n 2. Adding the Master Grid for Orders<\/strong> <\/p>\n\n\n\n Once a customer is selected, we display their orders using an igx-grid. The grid\u2019s data source is northwindSwaggerOrderWithDetailsDto, updated every time localCustomerId changes. <\/p>\n\n\n\n 3. Adding a Custom Detail Template<\/strong> <\/p>\n\n\n\n To make the master grid more useful, we add a detail template for each order. This could contain product details, totals, or any related information. In our case, we\u2019ll be using it to display some of the grid\u2019s columns for address and additionally order details in a grid. <\/p>\n\n\n\n To configure the\u202figxGrid\u202fto display in master-detail mode, you need to specify a template inside the grid, marked with the\u202figxGridDetail\u202fdirective: <\/p>\n\n\n\n You can customize this detail template with any components that fit your business needs: text, input groups, nested grids, or charts. Here we\u2019ll use texts and a grid. <\/p>\n\n\n\n The context of the template is the master record data, so that values from the master record can be displayed in the detail template. <\/p>\n\n\n\n This means inside the detail template, you can access any property of the master record through rowData. For instance, rowData.shipAddress.country and rowData.orderDetails accesses the order\u2019s ID from the master grid\u2019s record. <\/p>\n\n\n\n In many cases, you don\u2019t want to load all the detail data up front. Instead, you can fetch it on demand when a row is expanded. <\/p>\n\n\n\n Sometimes the detail data comes from a completely different endpoint and requires a parameter from the master record (for example, an order\u2019s ID). In such cases, we can load the detail on demand when the row is expanded. <\/p>\n\n\n\n In this approach, every time a row is expanded, we request the detail data from the API using the master record\u2019s ID. <\/p>\n\n\n\n While straightforward, this approach triggers a new API call constantly after it\u2019s been made visible. This could slow down the application and even cause it to crash. <\/p>\n\n\n\n Repeatedly fetching the same detail data is costly in both performance and network usage. A simple and effective solution is to cache the data after it\u2019s loaded for the first time. <\/p>\n\n\n\n This is easy to implement and significantly reduces the number of requests. <\/p>\n\n\n\n Building Master-Detail views in Angular doesn\u2019t have to be complex or performance-intensive. With Ignite UI for Angular, you gain a powerful, elegant solution that requires minimal setup yet offers full flexibility and customization to fit your application\u2019s unique needs. <\/p>\n\n\n\n Whether you are building admin dashboards, management systems, or data-driven interfaces, Ignite UI\u2019s Angular grid gives you everything you need to develop fast, responsive, and maintainable applications.<\/p>\n\n\n\n You can check out our Ignite UI for Angular Grid samples<\/a> and explore all the components and features used. The Fleet Management app<\/a> demonstrates the use of Master-Detail Grid, so you can see how the data is presented and managed in real-world scenarios.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" The master-detail layout is a proven UI pattern that provides a straightforward, scalable, and user-friendly way to present related data without overwhelming the screen.\u00a0Learn more in this article.<\/p>\n","protected":false},"author":173,"featured_media":3032,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[23,48,36,20,38],"class_list":["post-3029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-angular-grids","tag-app-development","tag-ignite-ui","tag-ignite-ui-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/173"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=3029"}],"version-history":[{"count":13,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3029\/revisions"}],"predecessor-version":[{"id":3113,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3029\/revisions\/3113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/3032"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What Is a Master-Detail Layout? <\/h2>\n\n\n\n
\n
\n
\n
Setting Up the Angular Project <\/h2>\n\n\n\n
ng new master-detail-grid <\/pre>\n\n\n\n
ng add igniteui-angular<\/pre>\n\n\n\n
ng generate component pages\/grid-demo<\/pre>\n\n\n\n
import { Routes } from '@angular\/router'; \nexport const routes: Routes = [ \n { path: '', redirectTo: '\/demo', pathMatch: 'full' }, \n { path: 'demo', loadComponent: () => import('.\/pages\/grid-demo\/grid-demo.component').then(m => m.GridDemoComponent) }, \n { path: '**', redirectTo: '\/demo' } \n]; <\/pre>\n\n\n\nSetting Up the Data <\/h2>\n\n\n\n
\n
export interface Customer { \n customerId: string; \n companyName: string; \n contactName: string; \n country: string; \n} \nexport interface Order { \n orderId: number; \n customerId: string; \n orderDate: string; \n shipAddress: string; \n freight: number; \n} \nexport interface OrderDetail { \n orderId: number; \n productId: number; \n quantity: number; \n unitPrice: number; \n} <\/pre>\n\n\n\nconst API_ENDPOINT = 'https:\/\/data-northwind.indigo.design'; \n@Injectable({ \n providedIn: 'root' \n}) \nexport class NorthwindSwaggerService { \n constructor(private http: HttpClient) {} \n public getCustomerDto(id: string): Observable<Customer | undefined> { \n return this.http.get<Customer | undefined>(`${API_ENDPOINT}\/Customers\/${id}`) \n .pipe(catchError(this.handleError<Customer | undefined>('getCustomerDto', undefined))); \n } \n public getCustomerDtoList(): Observable<Customer[]> { \n return this.http.get<Customer[]>(`${API_ENDPOINT}\/Customers`) \n .pipe(catchError(this.handleError<Customer[]>('getCustomerDtoList', []))); \n } \n public getOrderWithDetailsDtoList(id: string): Observable<Order[]> { \n return this.http.get<Order[]>(`${API_ENDPOINT}\/Customers\/${id}\/Orders\/WithDetails`) \n .pipe(catchError(this.handleError<Order[]>('getOrderWithDetailsDtoList', []))); \n } \n private handleError<T>(operation = 'operation', result?: T) { \n return (error: any): Observable<T> => { \n console.error(`${operation} failed: ${error.message}`, error); \n return of(result as T); \n }; \n } \n} <\/pre>\n\n\n\nDesigning the Master Grid <\/h2>\n\n\n\n
\n
<igx-simple-combo \n type=\"border\" \n [data]=\"northwindSwaggerCustomerDto\" \n displayKey=\"customerId\" \n (selectionChanging)=\"localCustomerId = $event.newValue.customerId\" \n class=\"single-select-combo\"> \n <\/igx-simple-combo> <\/pre>\n\n\n\n
public northwindSwaggerCustomerDto: CustomerDto[] = []; \nprivate _localCustomerId?: string; \npublic get localCustomerId(): string | undefined { \n return this._localCustomerId; \n } \n public set localCustomerId(value: string | undefined) { \n this._localCustomerId = value; \n this.selectedCustomer$.next(); \n this.northwindSwaggerOrderWithDetailsDto$.next(); \n } \n ngOnInit() { \nthis.northwindSwaggerService.getCustomerDtoList().pipe(takeUntil(this.destroy$)).subscribe( \n data => this.northwindSwaggerCustomerDto = data \n ); \n} <\/pre>\n\n\n\n![\"\"](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2025\/08\/master-detail-1.png\")
<\/figure>\n\n\n\n<igx-grid [data]=\"northwindSwaggerOrderWithDetailsDto\" primaryKey=\"orderId\" rowSelection=\"single\" [hideRowSelectors]=\"true\" [allowFiltering]=\"true\" filterMode=\"excelStyleFilter\" (rowSelectionChanging)=\"selectedOrder = $event.newSelection[0]\" class=\"grid\">\n <igx-column field=\"orderId\" oldDataType=\"number\" header=\"orderId\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"customerId\" oldDataType=\"string\" header=\"customerId\" [filterable]=\"true\" [sortable]=\"true\" required=\"true\" [minlength]=\"1\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"employeeId\" oldDataType=\"number\" header=\"employeeId\" [filterable]=\"true\" [sortable]=\"true\" [min]=\"1\" [max]=\"2147483647\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"shipperId\" oldDataType=\"number\" header=\"shipperId\" [filterable]=\"true\" [sortable]=\"true\" [min]=\"1\" [max]=\"2147483647\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"orderDate\" oldDataType=\"date\" header=\"orderDate\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"requiredDate\" oldDataType=\"date\" header=\"requiredDate\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"shipVia\" oldDataType=\"string\" header=\"shipVia\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"freight\" oldDataType=\"number\" header=\"freight\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"shipName\" oldDataType=\"string\" header=\"shipName\" [filterable]=\"true\" [sortable]=\"true\" [maxlength]=\"100\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"completed\" oldDataType=\"boolean\" header=\"completed\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n<\/igx-grid><\/pre>\n\n\n\n
private _selectedCustomer?: CustomerDto; \n public get selectedCustomer(): CustomerDto | undefined { \n return this._selectedCustomer; \n } \n public set selectedCustomer(value: CustomerDto | undefined) { \n this._selectedCustomer = value; \n this.selectedOrder = undefined; \n } \n public selectedCustomer$: Subject<void> = new Subject<void>(); \n public northwindSwaggerOrderWithDetailsDto: OrderWithDetailsDto[] = []; \n public northwindSwaggerOrderWithDetailsDto$: Subject<void> = new Subject<void>(); \n public selectedOrder?: OrderWithDetailsDto; \n ngOnInit() { \n this.northwindSwaggerService.getOrderWithDetailsDtoList(this.localCustomerId ?? '').pipe(takeUntil(this.destroy$)).subscribe( \n data => this.northwindSwaggerOrderWithDetailsDto = data \n ); \n this.northwindSwaggerOrderWithDetailsDto$.pipe(takeUntil(this.destroy$)).subscribe(() => { \n this.northwindSwaggerService.getOrderWithDetailsDtoList(this.localCustomerId ?? '').pipe(take(1)).subscribe( \n data => this.northwindSwaggerOrderWithDetailsDto = data \n ); \n }); \n } <\/pre>\n\n\n\n![\"\"](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2025\/08\/master-detail-2.png\")
<\/figure>\n\n\n\n<ng-template igxGridDetail> <\/ng-template><\/pre>\n\n\n\n
<ng-template igxGridDetail let-rowData>\n <div class=\"row-layout group_3\">\n <div class=\"row-layout group_4\">\n <div class=\"column-layout group_5\">\n <p class=\"ig-typography__subtitle-1 text\">\n Country\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n Code\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n City\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n Street\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n Phone\n <\/p>\n <\/div>\n <div class=\"column-layout group_6\">\n <p class=\"ig-typography__subtitle-1 text\">\n {{ rowData.shipAddress.country }}\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n {{ rowData.shipAddress.postalCode }}\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n {{ rowData.shipAddress.city }}\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n {{ rowData.shipAddress.street }}\n <\/p>\n <p class=\"ig-typography__subtitle-1 text\">\n {{ rowData.shipAddress.phone }}\n <\/p>\n <\/div>\n <\/div>\n <div class=\"column-layout group_7\">\n <p class=\"text\">\n Order Details\n <\/p>\n <igx-grid primaryKey=\"orderId\" [allowFiltering]=\"true\" filterMode=\"excelStyleFilter\" [data]=\"rowData.orderDetails\" class=\"grid_1\">\n <igx-column field=\"orderId\" oldDataType=\"number\" header=\"orderId\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"productId\" oldDataType=\"number\" header=\"productId\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"unitPrice\" oldDataType=\"number\" header=\"unitPrice\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"quantity\" oldDataType=\"number\" header=\"quantity\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <igx-column field=\"discount\" oldDataType=\"number\" header=\"discount\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column>\n <\/igx-grid>\n <\/div>\n <\/div>\n <\/ng-template><\/pre>\n\n\n\n![\"\"](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2025\/08\/master-detail-3.png\")
<\/figure>\n\n\n\nHandling Data Binding <\/h2>\n\n\n\n
\n
<ng-template igxGridDetail let-rowData> \n <div class=\"column-layout group_6\"> \n <p class=\"ig-typography__subtitle-1 text\"> \n {{ rowData.shipAddress.country }} \n <\/p> \n <div class=\"column-layout group_7\"> \n <igx-grid primaryKey=\"orderId\" [allowFiltering]=\"true\" filterMode=\"excelStyleFilter\" [data]=\"rowData.orderDetails\" class=\"grid_1\">\n \/igx-grid> \n <\/div> \n <\/div> \n <\/ng-template><\/pre>\n\n\n\nSimple Dynamic Loading <\/h2>\n\n\n\n
<igx-grid [data]=\"northwindSwaggerOrderDto\" primaryKey=\"orderId\" [allowFiltering]=\"true\" filterMode=\"excelStyleFilter\" class=\"grid\" (rowToggle)=\"onRowToggle($event)\"> \n <igx-column field=\"orderId\" dataType=\"number\" header=\"orderId\" [filterable]=\"true\" [sortable]=\"true\" [selectable]=\"false\"><\/igx-column> \n <ng-template igxGridDetail let-rowData> \n <ng-container *ngIf=\"getOrderDetails(rowData.orderId) | async as details\"> \n @for (item of details; track item) { \n <igx-input-group type=\"border\" class=\"input\"> \n <input type=\"text\" [(ngModel)]=\"item.orderId\" igxInput \/> \n <\/igx-input-group> \n }\n <\/ng-container> \n <\/ng-template> \n <\/igx-grid><\/pre>\n\n\n\ngetOrderDetails(orderId: number): Observable<any[]> { \n return this.northwindSwaggerService \n .getOrderDetailDtoList(orderId) \n .pipe( \n take(1) \n ); \n}<\/pre>\n\n\n\nPerformance Optimization Tips <\/h2>\n\n\n\n
private orderDetailsCache = new Map<number, Observable<any[]>>(); \ngetOrderDetails(orderId: number): Observable<any[]> { \n if (!this.orderDetailsCache.has(orderId)) { \n const request$ = this.northwindSwaggerService \n .getOrderDetailDtoList(orderId) \n .pipe( \n take(1), \n shareReplay(1), \n ); \n this.orderDetailsCache.set(orderId, request$); \n } \n return this.orderDetailsCache.get(orderId)!; \n }<\/pre>\n\n\n\nHow Does It Work? <\/h2>\n\n\n\n
\n
\n
\n
Wrap Up… <\/h2>\n\n\n\n