Datagrid dynamic aggregate throwing errors Angular 9.0.5

[Moses Fetters]

Hello,

Using   "@syncfusion/ej2-angular-grids": "^17.4.51" I cannot get the following to work in Angular 9.0.5 (does work in angular 8).

The code fails on the aggregates because of the  *ngIf statments with the following error. Even after removing the ngIfs the templates still dont properly render.

core.js:5871 ERROR TypeError: Cannot read property 'propCollection' of undefined at ComponentBase.push.../../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.ngAfterContentChecked (component-base.js:151) at ComponentBase.ngAfterContentChecked (ej2-angular-grids.js:526) at callHook (core.js:3939) at callHooks (core.js:3899) at executeInitAndCheckHooks (core.js:3840) at refreshView (core.js:11815) at refreshDynamicEmbeddedViews (core.js:13138) at refreshView (core.js:11796) at refreshComponent (core.js:13213) at refreshChildComponents (core.js:11504)

full template  of the grid below below 

<ng-container *ngIf="group">

  <ejs-grid rowHeight="40" #grid [dataSource]="group.assessmentDefinitions" allowSorting="true" allowTextWrap="true">

    <e-columns>

      <e-column field="name" headerText="Assessment" width="61%">

        <ng-template #template let-data>

          <div>{{ data.name }}<span class="warning-text inactive" *ngIf="!data.isActive">(Inactive)</span></div>

          <div class="detailedInformation">

            <small>Required: {{ data.minimumRequired }}</small>

            <br />

            <small>Completed: {{ data.numberOfInstancesCompleted }}</small>

          </div>

        </ng-template>

      </e-column>

      <e-column field="minimumRequired" width="90" headerText="Required" textAlign="Center"></e-column>

      <e-column field="numberOfInstancesCompleted" minWidth="90" width="120" headerText="Completed" textAlign="Center"></e-column>

      <e-column field="status" headerText="Status" textAlign="Center" width="90">

        <ng-template #template let-data>

          <ng-container *ngTemplateOutlet="statusTemplate; context: { status: data.status, show: data.numberOfInstancesCompleted > 0 }"></ng-container>

        </ng-template>

      </e-column>

    </e-columns>

    <e-aggregates>

      <e-aggregate>

        <e-columns>

          <e-column *ngIf="group.showUniqueCountAggregation" columnName="name" type="Custom" width="60%">

            <ng-template #footerTemplate let-data>Complete {{ group.minimimUniqueRequired }} different assessments</ng-template>

          </e-column>

          <e-column

            *ngIf="group.showUniqueCountAggregation"

            width="90"

            columnName="status"

            type="Custom"

            [customAggregate]="uniqueRequirementsAggregate"

            textAlign="Center"

          >

            <ng-template #footerTemplate let-data>

              <ng-container *ngTemplateOutlet="statusTemplate; context: { status: data.Custom, show: true }"></ng-container>

            </ng-template>

          </e-column>

        </e-columns>

      </e-aggregate>

      <e-aggregate>

        <e-columns>

          <e-column *ngIf="group.showCountAggregation" columnName="name" type="Custom">

            <ng-template #footerTemplate let-data>Complete {{ group.minimumRequired }} total assessments</ng-template>

          </e-column>

          <e-column *ngIf="group.showCountAggregation" columnName="status" type="Custom" [customAggregate]="totalRequirementsAggregate">

            <ng-template #footerTemplate let-data>

              <ng-container *ngTemplateOutlet="statusTemplate; context: { status: data.Custom, show: true }"></ng-container>

            </ng-template>

          </e-column>

        </e-columns>

      </e-aggregate>

    </e-aggregates>

  </ejs-grid>

  <ng-template #statusTemplate let-status="status" let-showStatus="show">

    <ng-container *ngIf="status.isComplete == true && showStatus">

      <mat-icon matTooltip="Requirements met" class="mat-icon--complete" svgIcon="check-box"></mat-icon>

    </ng-container>

    <ng-container *ngIf="status.isComplete == false">

      <mat-icon matTooltip="Did not meet requirements" class="mat-icon--not-complete" svgIcon="circle-exclamation"></mat-icon>

    </ng-container>

  </ng-template>

</ng-container>

[Moses Fetters]

Also does not work with version 17.4.55"

[Prasanna Kumar Viswanathan]

Hi Moses , 

 

Greetings from Syncfusion support 

 

Query : Datagrid dynamic aggregate throws error. 

 

We can able to face the mentioned issue in Angular 9.0.5 with the aggregate feature. So, currently we are validating the issue and we will update the details by tomorrow 12^th March, 2020. 

 

Regards 

Prasanna Kumar N.S.V