How to do dynamic expression in ngFor?

user_10931383 0
Viewed 1659

I have an array of objects (list: any[]) that I use in an *ngFor expression. Is it possible to display one of the properties from the object when I know the property name at runtime?

I am creating a component, called ListComponent that displays a list of items. The parent component called ParentComponent, will pass in the array of objects and the property that it wants the ListComponent to display in the list. Here is what I have so far in the ListComponent:

<div>
<div class="item" *ngFor="let item of itemList">{{item.name}}</div>
</div>

Instead of {{item.name}}, is it possible to make the .name part dynamic and use the property passed in by ParentComponent?

angular
3 Answers

You could create a 'dynamicKey' variable in your .ts that changes and access it like below. You could also optionally provide a default or empty string for the case it is undefined.

<div>
    <div class="item" *ngFor="let item of itemList">{{item[dynamicKey] || ''}}</div>
</div>

Another approach may be to create an array from the object based on your dynamic key, to reduce logic in the templates.

dynamicArray = itemList.map(item => item[dynamicKey])
<div>
    <div class="item" *ngFor="let item of dynamicArray">{{item}}</div>
</div>
user_84535020

try with the below code. here name is variable which can be dynamic from component.

<div>
<div class="item" *ngFor="let item of itemList">{{item[name]}}</div>
</div>
user_84054610

Component 

  @Input()  parentKey
  itemList=[{key:'State',value:'state'},
  {key:'Severity',value:'severity'},
  {key:'Priority',value:'priority'},
  {key:'Category',value:'categorization'},{key:'Owner',value:'owner'}

HTML

<div>
<div class="item" *ngFor="let item of itemList">{{item[parentKey]}}</div>
</div>

Stackblitz link: https://stackblitz.com/edit/angular-fakfmp?file=src/app/app.component.html

user_83750990
Related