Dynamic binding in Angular 2

Question

Basically I am looking for shorthand version of this:

<div class="">
{{listObject.firstHeaderKey.type === 'value' ? listObject.firstHeaderKey.key: item[listObject.firstHeaderKey.key}}
</div>

My data could either be a string or an expression i.e.

<div *ngFor="let mix of mixList">
    <div>
    {{mix}}
    </div>
</div>

mix can either be " 'text' " or "obj[text]" and accordingly the template should evaluate.

There doesn't seem to be other solution (atleast to me) looking at the heterogeneous content of your list. Better make your list homogeneous, restructure it so that obj[text] works for all mix values. — Akash
– Akash, Commented Apr 10, 2017 at 10:50

Maks K · Accepted Answer · 2017-04-10 09:51:56Z

2

According to best practisies you should do this in your typescript file

mix: any;
this.mix === 'value' ? listObject.firstHeaderKey.key : 
                       item[listObject.firstHeaderKey.key]

And template should be something like this:

<div>
{{mix}}
</div>

answered Apr 10, 2017 at 9:51

Maks K

3,9129 gold badges46 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Basically the content is inside a list (ngFor) and in that case I would have to call a function for every single displaying which is not optimal way