Category / Section
How to Create Sheets with Data in HTML of Angular Spreadsheet?
11 mins read
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
[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:
Conclusion
I hope you enjoyed learning on how to create sheets with data in the HTML of Angular Spreadsheet. You can refer to our Angular Spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Spreadsheet Example to understand how to create and manipulate data.
For current customers, you can check out our 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 other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
