I have aggregates inside the grid that is not rendering even when the if condition is valid

[Edel Custodio Frias]

Here my code

This code is inside `ejs-grid. If I remove the ngIf this is being rendering, but there are some use cases when I do not need to render the aggregates.

any thoughts team?

Thanks in advance.

[Vikram Sundararajan]

Hi Edel Custodio Frias,

Greetings from Syncfusion support,

Based on your query you are facing an issue with rendering aggregates inside the grid when using an ngIf condition. We suggest you to using *ngIf directly on <e-aggregate>. Because when you use *ngIf on the <ng-container>, it controls the rendering of the entire container, which might have different effects compared to applying it directly on the <e-aggregate>. When you apply *ngIf directly on the <e-aggregate>, it ensures that the aggregate components are created and rendered when the condition is met, and Angular can properly manage the lifecycle of those components.

Please refer the below code snippet and sample for mor information,

 app.component.html

 

    <e-aggregates>

      <e-aggregate *ngIf="config.aggregates">

        <e-columns>

          <e-column

            *ngFor="let row of config.aggregates"

            [type]="row.type"

            [field]="row.field"

            [format]="row.format"

          >

            <ng-template #footerTemplate let-data>

              {{ row.prefixText }}&ensp; {{ data[row.type] }}&ensp;{{

                row.suffixText

              }}

            </ng-template>

          </e-column>

        </e-columns>

      </e-aggregate>

    </e-aggregates>

 

App.component.ts
 

  public config = {

    aggregates: [

      {

        type: 'Sum',

        field: 'Freight',

        format: 'C2',

        prefixText: 'Sum:',

        suffixText: '',

      },

    ],

  };

 

Sample: https://stackblitz.com/edit/angular-qpdt25-mg9u5o?file=src%2Fapp.component.html

Please get back us if you need further assistance.

Regards,

Vikram S