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
User List
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
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>