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

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

Pass in the name of the property you want to display. I don't see the problem. — a better oliver
– a better oliver, Commented Apr 26, 2017 at 8:33
How would you reference it in the loop though? because in the the loop *ngFor="let item of list" then one needs to reference item in the loop based on the properties in list ... right? — user1752532
– user1752532, Commented Apr 26, 2017 at 8:34

danimal · Accepted Answer · 2017-04-26 08:35:48Z

3

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>

answered Apr 26, 2017 at 8:35

danimal

1,69714 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Angular component with dynamic input properties for list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related