CODEWITHSUNDEEP
angulartypescriptangular6
SGR
SGR

Reputation: 2427

To display object properties based on its ID

I have component called list in which i will display all my customers list as in below image:

enter image description here

and selecting particular customer i will emit that customer id and i will display that id in another component called display:

enter image description here

Instead of displaying the customer id how can i display that id's properties(for ex name, email )like this:

enter image description here

DEMO

Upvotes: 1

Views: 641

Answers (2)

jo_va
jo_va

Reputation: 13973

You seem to be using Angular Material, the following example shows how to display the property you want for the options in the dropdown, and for the selected value, outside of the dropdown. It uses value binding on mat-select to bind the selected customer to selectedCustomer:

const customers = [
  { id: 2, email: '[email protected]', name: 'Jack' },
  { id: 2, email: '[email protected]', name: 'John' }
];

<mat-form-field>
   <mat-select placeholder="Customer" [(value)]="selectedCustomer">
      <mat-option *ngFor="let customer of customers" [value]="customer.id">
        {{ customer.id }}
      </mat-option>
   </mat-select>
</mat-form-field>

<p>{{ selectedCustomer.name }} {{ selectedCustomer.email }}</p>

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86790

Instead of passing ID only, pass the full object on click event like this -

(click)="selected($event, customer)"

and display whatever you want to show like this -

{{CustId?.id}} {{CustId?.name}}

Working Example

Upvotes: 3

Related Questions