mat-checkbox is not working while using ng-template in Angular application

Im using Angular Slickgrid to display the data,in that I have noticed that the mat-checkbox is not working while using ng-template.

Current Behavior:

The checkbox is not working while using ng-template in some cases. As per the analysis the mat-checkbox checked class is not added in the DOM. Once inspect the element and added the missing class manually, then it is working fine.

Code format:

<ng-container ngTemplateOutlet]="booleanField" [ngTemplateOutletContext]="{'fieldKey':fieldKey}"></ng-container>

Template:

<ng-template #booleanField let-fieldKey="fieldKey">

<div>

<ng-container [ngTemplateOutlet]="matLabel" [ngTemplateOutletContext]="{'fieldKey':fieldKey}">

<section class="example-section">

<mat-checkbox id="FLD_cspfm_webcommon_lookup_filter_" class="cs-margin-left-to-right" (change)="valueChange(fieldKey,$event, undefined, 0)" [checked]="filterSectionDetail['filterFields'][fieldKey]['fieldValue'][0]"> true </mat-checkbox>

<mat-checkbox id="FLD_cspfm_webcommon_lookup_filter_" class="cs-margin-left-to-right" (change)="valueChange(fieldKey,$event, undefined, 1)" [checked]="filterSectionDetail['filterFields'][fieldKey]['fieldValue'][1]"> false </mat-checkbox>

</section>

</div>

</ng-template>

Expected Behavior:

The checkbox should be work in all cases while using ng-template.

Software Version

• Angular : 13.3.9
• Angular-Slickgrid : 4.3.1
• TypeScript : 4.6.4
• Operating System : Windows 10
• Node : 14.18.3
• NPM : 6.14.8