Native Angular SwitchCase doesn't work on columns template

[Mohamed BENNOUR]

Hi Team !

Because we have adynamic grid we got many "*ngIf" conditions on the template. We've tried to clean this up by changing "*ngIf" by "ngSwitch" and "*ngSwitchCase" but nothing works and it cause many console errors.

How can it be possible to provide an angular grid without angular functions ?

I found a two-year old ticket :https://www.syncfusion.com/forums/137471/multiple-template-in-switch-case-for-row-template-in-grid

Is there something done at the moment or in the roadmap ?

Regards

[Rajapandiyan Settu]

Hi Mohamed, 

Greetings from syncfusion support. 

Query : we have adynamic grid we got many "*ngIf" conditions on the template. We've tried to clean this up by changing "*ngIf" by "ngSwitch" and "*ngSwitchCase" but nothing works and it cause many console errors. 

 

We have already included the fix of switchCase support in the templates and prepared a sample for column template in the grid with ngSwitchCase condition. Please refer the below code example and sample for more information. 

<ejs-grid #grid [dataSource]='data'> 

  <e-columns> 

    <e-column *ngFor="let column of columns" [field]="column.field" [width]="column.width"> 

      <ng-template #template let-data> 

        <ng-container [ngSwitch]="data.OrderID%3">           

            <span  *ngSwitchCase="1" style="color:red"> {{data[column.field]}}</span> 

            <span  *ngSwitchCase="2" style="color:blue"> {{data[column.field]}}</span>           

          <span *ngSwitchDefault style="color:green">{{data[column.field]}}</span> 

        </ng-container> 

      </ng-template> 

    </e-column> 

  </e-columns> 

</ejs-grid> 

Sample : https://stackblitz.com/edit/angular-udaqpk-nzmrrw?file=app.component.ts 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S

[Mohamed BENNOUR]

Hi Rajapandiyan,

Sorry for the misunderstanding if there is one but we have to make conditons on <e-column> tag or upper and not inside the <ng-template> one.

This example doesn't mean anything but here is how we would like to separate our dynamic columns (based on your stackblitz example)

<ejs-grid #grid [dataSource]='data'>

  <e-columns>

    <ng-container *ngFor="let column of columns; let indexOfelement = index">

      <ng-container [ngSwitch]="index">

      <e-column *ngSwitchCase="1" [field]="column.field" [width]="column.width">

          <ng-template  #template let-data>

            <span style="color:red"> {{data[column.field]}}</span>

          </ng-template>

      </e-column>

      <e-column *ngSwitchCase="2" [field]="column.field" [width]="column.width">

          <ng-template #template let-data>

            <span   style="color:blue"> {{data[column.field]}}</span>

          </ng-template>      

      </e-column>

      <e-column *ngSwitchDefault [field]="column.field" [width]="column.width">

          <ng-template  #template let-data>

            <span  style="color:green">{{data[column.field]}}</span>

          </ng-template>

      </e-column>

      </ng-container>

    </ng-container>

  </e-columns>

</ejs-grid>

Because some of the columns are normal and other require specific attributes on the <e-column> tag and specific <ng-template> too.

The code doesn't display the grid. Only an error "Error: Cannot read property 'directivePropList' of undefined" in the console.

Regards

[Rajapandiyan Settu]

Hi Mohamed, 

Thanks for your patience. 

Query :  The code doesn't display the grid. Only an error "Error: Cannot read property 'directivePropList' of undefined" in the console 

 

The mentioned issue had raised in our old package versions and which has been resolved in latest version. So we suggest you to upgrade the syncfusion packages to latest to resolve the reported problem. Refer the below sample for more information. 

Sample : https://stackblitz.com/edit/angular-udaqpk-jb47yt?file=app.component.html  

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S