How to get an object from a (select) in angular

Question

I have this select and i want to select the object but when i do that i get a string. The array "devices" contains a list of bluetooth devices.

HTML:

   <select (change)="selectDevice($event.target.data)">
          <option>Select device</option>
          <option *ngFor="let device of devices">
            Name: {{device.name}} -
            Address: {{device.address}} -
            Class: {{device.class}}
            <br>
          </option>
   </select>

TS

  selectDevice(singleDevice: BluetoothDevice){
  console.log(singleDevice)
  }

CLASS:

export class BluetoothDevice {
public id: string
public class: number
public address: string
public name: string
}

How can i obtain the object instead of the string?

EDIT 1: I tryed to change the (change) with the [(ngModel)] but when i print the object in the console i obtain [object Object] instead of the object selected on the select. Why?

You should use either [Template Driven Forms](https://angular.io/guide/forms) or [Reactive Forms](https://angular.io/guide/reactive-forms) approach in your code. Either of those two techniques will allow you to create standard working code using the standard angular approved mechanism. The Angular team recommends Reactive over Template for most scenarios. — Igor, Apr 29 '21 at 14:56

score 1 · Answer 1 · answered Apr 29 '21 at 15:30

To get the current value of the select do the following:

<!-- HTML TEMPLATE -->
<select [(ngModel)]="selectedDeviced">
  <option [ngValue]="null">Select device</option>
  <option *ngFor="let device of devices" [ngValue]="device">
    Name: {{ device.name }} -
    Address: {{ device.address }} -
    Class: {{ device.class }}
    <br>
  </option>
</select>

You need [(ngModel)]="selectedDeviced" to access to the selected device from the select.
Then use [ngValue] in the options to pass the the object selected.

[value]="..." only supports string values
[ngValue]="..." supports any type

And in the Typescript create the property for the selectedDevice.

import { Component } from '@angular/core';
import { BluetoothDevice } from '@app-models/bluetooth-device'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor() { }

  selectedDevice: BluetoothDevice | null = null;

}

Finally don't forget to add the FormsModule to the imports array in the module you are working on.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import to allow ngModel to work.
// Components
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

And boom, it should be working. You can now get rid of the function selectDevice and to access to the selected device, you do it be referencing the selectedDevice property.

import { Component } from '@angular/core';
import { BluetoothDevice } from '@app-models/bluetooth-device'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor() { }

  selectedDevice: BluetoothDevice | null = null;

  onSumbit() {
    if (!this.selectedDevice) {
      console.log('No device selected');
      return;
    }
    console.log('Device selected: ', this.selectedDevice);
  }

}

ShayD · Answer 2 · 2021-04-29T15:27:04.030

0

ts:

SelectedDevice:BluetoothDevice;

SelectDevice(){
  console.log(this.SelectedDevice);
}

Html:

<select (change)="selectDevice()" [(ngModel)]="SelectedDevice">
      <option>Select device</option>
      <option *ngFor="let device of devices" [ngValue]="device">
        Name: {{device.name}} -
        Address: {{device.address}} -
        Class: {{device.class}}
        <br>
      </option>
</select>

edited Apr 29 '21 at 15:27

answered Apr 29 '21 at 14:53

ShayD

689
7
17

But if i do that, the console log print me a string with all the object field but not the object, i tryed it many times. – Apr 29 '21 at 14:54
Take a look here: https://stackoverflow.com/a/37968835/5107490 – ShayD Apr 29 '21 at 14:57
Yeah i didn't try to do that with [(ngMode)], but it means to use that instead the (select). Am i right? – Apr 29 '21 at 14:59

How to get an object from a (select) in angular

2 Answers2