Hot to get id and name from dropdown in angular 4?

Question

In angular 4 .ts i want to use both accounts.Id and accounts.Name from dropdown. can it be possible?

<select [(ngModel)]="selectedName" class="form-control" (change)="SearchLedgerTransaction($event.target.value)">
      <option value=""></option>
      <option *ngFor="let accounts of accountledger" [value]="accounts.Id && accounts.Name">
          {{accounts.Name}}
      </option>
  </select>
  <br />
  {{selectedName}} Account Ledger View

[value]="accounts.Id" is used to get data from database and i want [value]="accounts.Name" to show selected drop down name value from it. — UKMANDAL, Dec 02 '18 at 04:54
You can set Id for value. in the function in `.ts` you can filter it from the array. — Sachin Gupta, Dec 02 '18 at 04:59
https://stackblitz.com/edit/angular-cqtwra but i need name instead id and i want to use id for other purpose. — UKMANDAL, Dec 02 '18 at 06:41

KShewengger · Answer 1 · 2018-12-03T00:12:50.360

If you have a long list of accountledger and want to fetch its id and name only, you can try this method:

    <option *ngFor="let accounts of accountledger" 
            [ngValue]="{id: accounts.Id, name: accounts.Name}">  // Use ngValue for multi-select control. Setup the object value you want to assign to the 'selectedName' model
        {{accounts.Name}}
    </option>

Then, your selectedName model value will become, example: { id: 1, name: 'Kristy' }

Had created a Stackblitz Demo for your reference.

UPDATE

1.) On your select, you can specify [ngModel] and (ngModelChange) separately.

<select [ngModel]="selectedName" 
        (ngModelChange)="onSelectName($event)"   // Call onSelectName function if select is actively changed
        class="form-control" >

    <option value=""></option>

    <option *ngFor="let accounts of accountledger" 
            [ngValue]="{ id: accounts.Id, name: accounts.Name }">  // Pass Id and Name 
         {{accounts.Name}}
    </option>
</select>

On your Component - Destructure the parameter as the current event value is the passed { id: accounts.Id, name: accounts.Name } from select box [ngValue]

onSelectName({id, name}): void {
   this.selectedName = name;         // Not Recommended; With this, you can now reset the selectedName value to just the name value

   this.name = name;                 // Create new variable to store the name, if you will reassign the selectedName model value which holds ID and Name based on the template [ngValue], it will not reflect the updated data if you reassign it to just name. I suggest you create new one that acts as your official model name to store the selected name. 

   console.log(id);                  // and fetch its ID as well, depends on how you want to use this.
}

https://stackblitz.com/edit/angular-cqtwra but i need name instead id and i want to use id for other purpose. — UKMANDAL, Dec 02 '18 at 06:41
@LincolnMandal had update my comment and also forked your repo as well. Hope this helps you with your concern :) https://stackblitz.com/edit/angular-rvzvsl — KShewengger, Dec 02 '18 at 07:03

score 0 · Accepted Answer · answered Dec 02 '18 at 05:03

0

you can use something like..

<select [(ngModel)]="selectedName" class="form-control" (change)="SearchLedgerTransaction($event.target.value)">
    <option value=""></option>
    <option *ngFor="let accounts of accountledger" [value]="accounts">
        {{accounts.Name}}
    </option>
</select>
<br />
{{selectedName.Id}}{{selectedName.Name}} Account Ledger View

answered Dec 02 '18 at 05:03

R. Viral

386
1
6

Cannot read property 'Id' of undefined or Cannot read property 'Name' of undefined – UKMANDAL Dec 02 '18 at 05:15
you are getting error after selecting value from dropdown? – R. Viral Dec 02 '18 at 05:17
selecting value from dropdown is perfect but i want to get selected name into {{name}} by using ngModel from above select option list.but i have used Id already and i want name. Any ideas ? – UKMANDAL Dec 02 '18 at 05:20
can you share data of `accountledger`? will create and share working example for you – R. Viral Dec 02 '18 at 05:22
export class Account{ Id: number; Name: string;} – UKMANDAL Dec 02 '18 at 05:24
{{selectedName}} Account Ledger View – UKMANDAL Dec 02 '18 at 05:25
i hope you can get help from it – R. Viral Dec 02 '18 at 05:33
let me apply and find out and tell you what i got in result. Thankx for it. – UKMANDAL Dec 02 '18 at 05:42
Not helped, i got nothing just empty value. and i want this accounts.Name in the form of {{selectedName}}. don't get it man. – UKMANDAL Dec 02 '18 at 05:51
friend use ngValue not value write code something like...`` – R. Viral Dec 02 '18 at 06:02
check my shared demo my .ts file and html file closely – R. Viral Dec 02 '18 at 06:03
https://stackblitz.com/edit/angular-cqtwra but i need name instead id and i want to use id for other purpose. – UKMANDAL Dec 02 '18 at 06:41
i done it you can check it on https://stackblitz.com/edit/angular-a41y5y – R. Viral Dec 02 '18 at 07:03
At last thank you so much. this function helps me. solved my issue. you are great. – UKMANDAL Dec 02 '18 at 07:33

Hot to get id and name from dropdown in angular 4?

2 Answers2