I've been working with a Devextreme's Datatable and my goal is to dynamically configure the table using a columns configuration array.
The plan is to loop through this array using an ngFor and set column tags properties dynamically.
Now, the big question is: how do we interpolate/inject/dynamically set the value of HTML attributes within an ngFor?
Here's what I have attempted so far…
1) I tried simple string interpolation:
<dxi-column *ngFor="let col of columns" caption="{{col.caption}}" [visible]="{{col.show}}"></dxi-column>
Unfortunately, I encountered this error:
Got interpolation ({{}}) where expression was expected
2) Next, I experimented with [attr.XXXX]={{}} and string interpolation:
<dxi-column *ngFor="let col of columns" [attr.caption]="{{col.caption}}" [attr.visible]="{{col.show}}"></dxi-column>
However, I kept getting the same error message:
Got interpolation ({{}}) where expression was expected
3) In a last-ditch effort, I attempted something desperate, wrong, and awful...
<dxi-column *ngFor="let col of columns" [attr.caption]=col.caption [attr.visible]=col.show></dxi-column>
Needless to say, it didn't work (but desperation can lead to creative ideas sometimes).
Just for reference, here's my test configuration array if you're curious:
id: TableCol = {datafield:"id", show:"true"};
desc: TableCol = {datafield:"idNodo", show:"showdesc"};
columns: TableCol[] = [this.id, this.desc]
PS: Feel free to reach out if you need any clarification.