How to dynamically create sheets with data in HTML of Angular Spreadsheet?

This knowledge base article explains how to dynamically create sheets with data in the HTML of Angular Spreadsheet. This can be achieved by adding each sheet dynamically using the directive while iterating over the sheet collection with Angular’s ngFor directive in the Spreadsheet component.

[app.component.html]

<div class="control-section">
 <ejs-spreadsheet #cellDataBind [showRibbon]="false" [showFormulaBar]="false">
   <e-sheets>
     <ng-container *ngFor="let sheet of excelData">
       <e-sheet name="{{ sheet.sheetName }}">
         <e-rows>
           <e-row>
             <e-cells>
               <e-cell value=""></e-cell>
               <e-cell
                 value="{{ sheet.objectType }}"
                 [style]="objectTypeStyle"
                 colSpan="{{ sheet.columnFields.length - 1 }}"
               ></e-cell>
             </e-cells>
           </e-row>
           <e-row>
             <e-cells>
               <ng-container *ngFor="let field of sheet.columnFields">
                 <e-cell value="{{ field }}" [style]="headingStyle"></e-cell>
               </ng-container>
             </e-cells>
           </e-row>
           <ng-container *ngFor="let question of sheet.data">
             <e-row>
               <e-cells>
                 <ng-container *ngFor="let field of sheet.columnFields">
                   <e-cell value="{{ question[field] }}"></e-cell>
                 </ng-container>
               </e-cells>
             </e-row>
           </ng-container>
         </e-rows>
         <e-columns>
           <ng-container *ngFor="let field of sheet.columnFields">
             <e-column
               *ngIf="field == 'Question'"
               [width]="280"
               [style]="headingStyle"
             ></e-column>
             <e-column *ngIf="field != 'Question'" [width]="130"></e-column>
           </ng-container>
         </e-columns>
       </e-sheet>
     </ng-container>
   </e-sheets>
 </ejs-spreadsheet>
</div> 

[app.component.ts]

import { CommonModule } from '@angular/common';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
import { TextBoxAllModule } from '@syncfusion/ej2-angular-inputs';
import {
 RadioButtonAllModule,
 ButtonAllModule,
} from '@syncfusion/ej2-angular-buttons';
import {
 DropDownListAllModule,
 MultiSelectAllModule,
} from '@syncfusion/ej2-angular-dropdowns';
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import {
 SpreadsheetComponent,
 getFormatFromType,
} from '@syncfusion/ej2-angular-spreadsheet';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
 name: 'sortByOrder',
})
export class SortByOrderPipe implements PipeTransform {
 transform(value: any[]): any[] {
   return value.sort((n1, n2) => {
     return n1.order - n2.order;
   });
 }
}

interface SheetDataItem {
 Question: string;
 responseType: string;
 order: number;
 id?: string;
 parentId?: string | null;
 parentAnswer?: any | null;
 [key: string]: any;
}

interface SheetData {
 sheetName: string;
 taskHeaderId: string;
 columnFields: Array<string>;
 objectType: string;
 data: Array<SheetDataItem>;
}
/**
* Cell Data Binding Spreadsheet Controller
*/
@Component({
 standalone: true,
 imports: [
   CommonModule,
   SpreadsheetAllModule,
   TextBoxAllModule,
   RadioButtonAllModule,
   DropDownListAllModule,
   MultiSelectAllModule,
   ButtonAllModule,
 ],
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
 constructor() {}
 @ViewChild('cellDataBind')
 public spreadsheetObj: SpreadsheetComponent;
 public excelData: Array<SheetData> = [
   {
     sheetName: 'GreaseSkid',
     taskHeaderId: 'xxx',
     columnFields: ['Question', 'S2530', 'S2611', 'S23512'],
     objectType: 'Skid',
     data: [
       {
         S2530: false,
         S2611: false,
         S23512: false,
         Question: 'Skip',
         responseType: 'toggle',
         order: 1,
       },
       {
         S2530: true,
         S2611: true,
         S23512: true,
         Question: 'Grease engine?',
         responseType: 'toggle',
         order: 2,
         id: '9A27C21B-1494-1440-1B91-AAA6DCCC38AF',
         parentId: null,
         parentAnswer: null,
       },
       {
         S2530: true,
         S2611: false,
         S23512: true,
         Question: 'Grease cooler?',
         responseType: 'toggle',
         order: 3,
         id: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentId: null,
         parentAnswer: null,
       },
       {
         S2530: null,
         S2611: null,
         S23512: null,
         Question: 'Inboard Idler Bearing',
         responseType: 'int',
         order: 4,
         id: '013D5DE6-A14F-1FB6-8F0B-DC6A52AA21C9',
         parentId: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentAnswer: true,
       },
       {
         S2530: null,
         S2611: null,
         S23512: null,
         Question: 'Outboard Idler Bearing',
         responseType: 'int',
         order: 5,
         id: 'C91EA970-5711-873B-A580-275EE546752F',
         parentId: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentAnswer: true,
       },
       {
         S2530: null,
         S2611: null,
         S23512: null,
         Question: 'Fan Shaft Bearing',
         responseType: 'int',
         order: 6,
         id: '8167FA19-586C-3545-4498-0CA7EFDF3465',
         parentId: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentAnswer: true,
       },
       {
         S2530: null,
         S2611: true,
         S23512: null,
         Question: 'Grease Other?',
         responseType: 'toggle',
         order: 7,
         id: '7E5A8092-A1FD-7B1E-2413-BC29F86303E7',
         parentId: null,
         parentAnswer: null,
       },
     ],
   },
   {
     sheetName: 'Some Other Task',
     taskHeaderId: 'yyyy',
     columnFields: ['Question', 'S2530', 'S2611', 'S23512'],
     objectType: 'Skid',
     data: [
       {
         S2530: false,
         S2611: false,
         S23512: false,
         Question: 'Skip',
         responseType: 'toggle',
         order: 1,
       },
       {
         S2530: true,
         S2611: true,
         S23512: true,
         Question: 'Grease engine?',
         responseType: 'toggle',
         order: 2,
         id: '9A27C21B-1494-1440-1B91-AAA6DCCC38AF',
         parentId: null,
         parentAnswer: null,
       },
       {
         S2530: true,
         S2611: false,
         S23512: true,
         Question: 'Grease cooler?',
         responseType: 'toggle',
         order: 3,
         id: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentId: null,
         parentAnswer: null,
       },
       {
         S2530: null,
         S2611: null,
         S23512: null,
         Question: 'Inboard Idler Bearing',
         responseType: 'int',
         order: 4,
         id: '013D5DE6-A14F-1FB6-8F0B-DC6A52AA21C9',
         parentId: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentAnswer: true,
       },
       {
         S2530: null,
         S2611: null,
         S23512: null,
         Question: 'Outboard Idler Bearing',
         responseType: 'int',
         order: 5,
         id: 'C91EA970-5711-873B-A580-275EE546752F',
         parentId: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentAnswer: true,
       },
       {
         S2530: null,
         S2611: null,
         S23512: null,
         Question: 'Fan Shaft Bearing',
         responseType: 'int',
         order: 6,
         id: '8167FA19-586C-3545-4498-0CA7EFDF3465',
         parentId: '187CCC4A-0E91-4A25-6915-679F93F49355',
         parentAnswer: true,
       },
       {
         S2530: null,
         S2611: true,
         S23512: null,
         Question: 'Grease Other?',
         responseType: 'toggle',
         order: 7,
         id: '7E5A8092-A1FD-7B1E-2413-BC29F86303E7',
         parentId: null,
         parentAnswer: null,
       },
     ],
   },
 ];
 public styles = { fontWeight: 'bold', textAlign: 'center' };
 public styles2 = { fontWeight: 'bold', textAlign: 'right' };
 public styles3 = { fontWeight: 'bold' };
 currencyFormat: string = getFormatFromType('Currency');
} 

Sample Link:https://stackblitz.com/edit/angular-vg7yew-9rddcj?file=src%2Fapp.component.html

Output: