Kendo Grid dynamic columns with ngFor and ngSwitch

[esp]

Take a look at this Plunker:

https://plnkr.co/edit/SyfbOR4dlMqbB3FJwGzR?p=preview

What I'm trying to achieve is specifying a set of grid-columns using Angular ngFor and ngSwitch directives. Using ngFor renders fine, but once I try to introduce ngSwitch, it renders as if there were not grid-column components.

It should be possible but I'm wondering if I'm missing something?

 

Thanks.

[Svet]

Hi,

Thank you for the provided sample plunker.

Indeed, this seems to be the default behavior of ngSwitch. I have prepared the following sample plunker that demonstrates the same behavior out of the Grid context:

https://plnkr.co/edit/9Vgt9Ug2jx8XXDQPOZdC?p=preview 

There seems to be a difference in the design implementation of ngSwitch and *ngIf causing the undesired behavior.

This is why, I recommend the use of *ngIf instead. Check the following updated sample plunker for reference:

https://plnkr.co/edit/Yxk166m5R5vFQQy6Us3f?p=preview

I hope this helps. Please let me know in case you need further assistance for this case.

Regards,
Svetlin
Progress Telerik

[esp]

Thanks for the reply.

I'm not sure what exactly the behaviour is but going back to plunker, you can see here that nesting an ngSwitch inside an ngFor works as expected outside of the grid:

https://plnkr.co/edit/SyfbOR4dlMqbB3FJwGzR?p=preview

But yes, using ngIf instead should be ok.

[Svet]

Hi,

I am glad that the use of *ngIf is ok for the specific scenario.

I will add a bit more information on the case. The grid uses Angular's ContentChildren in order to get its child elements. The following code will work as expected:

<ng-container *ngFor="let column of columns">
          <ng-container [ngSwitch]="column.title">
            <p *ngSwitchCase="'ID'">{{ column.title }}</p>
          </ng-container>
        </ng-container>

because it does not use @ContentChildren .

When simulating the same scenario with a parent component that gets its children using @ContentChildren, ngSwitch behaves different than *ngIf as demonstrated in the provided sample plunker:

https://plnkr.co/edit/yCcJ8E4SwpYVH6EYo9gl?p=preview

The number of child elements is 0 when using ngSwitch and 1 when using *ngIf.

I hope this provides some more detailed information.

Regards,
Svetlin
Progress Telerik