Angular component with dynamic input properties for list

Question

Just wondering if this is at all possible

The scenario is: I want to create a list component using *ngFor, but i want the *ngFor embedded in the component itself

foo-list-items.html (component)

<ul>
   <li *ngFor="let item of list" (click)="goto(item)">
       {{ item.name }}<br />
       <small> Email: {{ item.email }} </small>
   </li>
</ul>

Would it be possible with @Input() name:any to make the looped name property based on a input from the component parent?

So in the html one could write

Parent html

<foo-list-items [list]="usersList" 
                (onItemClicked)="gotoUser($event)" 
                [name]="item.name">
</foo-list-items>

Where [name]="item.name" is the dynamic property passed into the child component, with which to reference in the loop.

So for instance if one has 2 lists

1. User List

2. Program List

However the data for the name property is .name for the User List and .programName for the Program List. Can you define the property for item in the *ngForloop as an input value on the parent component?

So basically creating a generic *ngFor no matter what the item.name is. The name in the loop, of the child component, will display for item.name or item.programName

Answer 1

You can pass a string as an input property to the foo-list-items component such as:

<foo-list-items [list]="usersList" 
            (onItemClicked)="gotoUser($event)" 
            [name]="'name'">
</foo-list-items>

or

<foo-list-items [list]="programList" 
            (onItemClicked)="gotoUser($event)" 
            [name]="'programName'">
</foo-list-items>

and then in the component template use array key (object['property']) rather than dot notation:

<ul>
  <li *ngFor="let item of list" (click)="goto(item)">
   {{ item[name] }}<br />
   <small> Email: {{ item.email }} </small>
  </li>
</ul>