How to render checkbox with checked status based on data loaded in Angular Spreadsheet?

This knowledge base explains how to render checkbox with checked status based on the data loaded in the Angular Spreadsheet. Fetch the template range address with reference to the data source length using getRangeAddress method. After that, render the checkbox with checked state based on the value provided in the data source using template property.

[app.component.html]

<div class="control-section">
 <ejs-spreadsheet #default="" (created)="created()">
   <e-sheets>
     <e-sheet name="Employee Data">
       <e-ranges>
         <e-range startcell="A1" [datasource]="data"></e-range>
         <e-range [address]="address" [datasource]="data">
           <ng-template #template="" let-cell="">
             <ejs-checkbox #checkbox="" [checked]="cell.value" (change)="onChange($event)"></ejs-checkbox>
           </ng-template>
         </e-range>
       </e-ranges>
       <e-columns>
         <e-column [width]="100"></e-column>
         <e-column [width]="100"></e-column>
         <e-column [width]="130"></e-column>
         <e-column [width]="90"></e-column>
         <e-column [width]="90"></e-column>
         <e-column [width]="90"></e-column>
         <e-column [width]="90"></e-column>
         <e-column [width]="90"></e-column>
         <e-column [width]="90"></e-column>
       </e-columns>
     </e-sheet>
   </e-sheets>
 </ejs-spreadsheet>
</div> 

[app.component.ts]

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
 getRangeAddress,
 SpreadsheetComponent,
} from '@syncfusion/ej2-angular-spreadsheet';
import { getDefaultData } from './data';

@Component({
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css'],
 encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
 constructor() {}
 @ViewChild('default')
 public spreadsheetObj: SpreadsheetComponent;

 public data: Object[] = getDefaultData();

 // You need to pass the [start rowIndex, start colIndex, end rowIndex, end colIndex] as argument for getRangeAddress method. It will return the address in string format( eg. A2:A11)
 public address: string = getRangeAddress([1, 0, this.data.length, 0]);

 // Gets triggered when the check box status is changed.
 onChange(args) {
   // Get the active cell in which the check box status changed.
   let actCell: string = this.spreadsheetObj.getActiveSheet().activeCell;
   console.log('Checkbox status', args.checked, 'at cell', actCell);
 }

 created() {
   this.spreadsheetObj.cellFormat(
     { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
     'A1:J1'
   );
   this.spreadsheetObj.setRowsHeight(23, ['1:11']);
 }
} 

Stackblitz Sample: https://stackblitz.com/edit/angular-efhn5x-2gplq6?file=src%2Fapp.component.ts

Output:

Documentation Link:
https://ej2.syncfusion.com/angular/documentation/spreadsheet/template

Demo Link:
https://ej2.syncfusion.com/angular/demos/#/material3/spreadsheet/cell-template

Conclusion
I hope you enjoyed learning about how to render checkbox with checked status based on data loaded in 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!