Angular @Input array- how to reference different array object field names?

Question

I want to setup a reusable dropdown menu whereby I pass an array of objecs to the @Input of my dropdown component and then update some labels in it.

The array fields will be different each time. One array might have a displayName string field, while another array will have a string called id as the field I want to reference, for example.

I'm not sure how to reference these on a per instance basis.

Dropdown HTML:

<ng-container *ngFor="let item of content">
  <span class="button-label">{{item.whatever-the-field-is}}</span>
</ng-container>

Dropdown Component:

@Input() content: Array<any> = [];

Dropdown Instance:

<multi-button-dropdown [content]="(myArrayObservable$ | async)"></multi-button-dropdown>

Example Arrays:

users = [
  {
    id: 'afvnf102841-251',
    username: 'Joe Bloggs'
  }
  ...
]

members = [
  {
    displayName: 'Han Solo',
    location: 'Space'
  }
  ...
]

Question:

How do i setup the dropdown.html/component so that the <span> {{item....}} reference will be displayName for the members[] instance, id for the users[] instance and so on, passed in by another @Input value?

The example arrays are wrong. Probably you were trying to define array of objects instead. — Barremian
– Barremian, Commented Mar 26, 2021 at 11:01

Barremian · Accepted Answer · 2021-03-26 11:00:05Z

1

One quick way would be to use the keyvalue pipe inside the *ngFor to iterate over the object properties without knowing it's names.

<ng-container *ngFor="let item of content">
  <span class="button-label" *ngFor="let prop of item | keyvalue">
    {{ prop.key }} - {{ prop.value }}
  </span>
</ng-container>

answered Mar 26, 2021 at 11:00

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Comments

Rebecca O'Riordan · Accepted Answer · 2021-03-26 12:22:51Z

0

I figured out that I can make a new interface which sets out the label value, and map the Observable array object fields to this value before passing it into the component:

this.dropdownUsers = users.map(user => (
  {
    label: user.displayName
  }
));

<multi-button-dropdown [content]="dropdownUsers"></multi-button-dropdown>

answered Mar 26, 2021 at 12:22

Rebecca O'Riordan

8839 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular @Input array- how to reference different array object field names?

Dropdown HTML:

Dropdown Component:

Dropdown Instance:

Example Arrays:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Dropdown HTML:

Dropdown Component:

Dropdown Instance:

Example Arrays:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related