Material Select: Is there a way to access the label string t

import { Component, OnInit } from '@angular/core';

import { Http } from '@angular/http';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

optionsSelect:Array<any> = [

{value: '', label: ''}

];

url='https://jsonplaceholder.typicode.com/users';

constructor(private http:Http) {

}

getData() {

return this.http.get(this.url).map(res=>res.json());

}

ngOnInit() {

this.getData().subscribe(next=> {

this.optionsSelect= [

{value: next[0].name, label: next[0].email},

{value: next[1].name, label: next[1].email},

{value: next[2].name, label: next[2].email},

{value: next[3].name, label: next[3].email},

];

console.log('name(value): '+this.optionsSelect[0].value);

console.log('email(label): '+this.optionsSelect[0].label);

});

}

}

<div class="row">

<div class="col-md-6 mx-auto my-5">

<mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

<label>Example label</label>

<p>name as value: {{optionsSelect[0].value}}</p>

<p>email as label: {{optionsSelect[0].label}}</p>

</div>

</div>

ak.leimrey pro commented 7 years ago

Awesome, thanks. With your code example, I realized I wasn't actually reading the Array I received from my Http call, but instead only the item that I picked. Also, since I don't really need two-way binding for my example, I gave it a minor change and now I've got access to the whole object the way I wanted it to be. Thanks alot, Damian! .html Sales Organization onChange(item: SalesOrgModel) { // this.currentSalesSelection = salesOrgItem; let listValue: number; listValue = item.value; console.log('Picked item has value: ' + this.salesOrganizations[listValue].value + ' and label: ' + this.salesOrganizations[listValue].label) }

---

Damian Gemza staff commented 7 years ago

Glad that could help you! I'm closing this ticket :) Best Regards, Damian

---