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

Topic: Material Select: Is there a way to access the label string too?

ak.leimrey pro asked 6 years ago

So, new issues on my end. So I make a call on my spring backend, to fill my material select with values dynamically. So far, so good and it actually works pretty nicely.

https://imgur.com/qiqGbFW

Looks juicy and crisp. Just the way I wanted it to be. But I noticed, while I get the value of a single item, I simply can't access its labels, but I need them as well.

The way I access the value:

<div class="col-md-2">
<mdb-select [(ngModel)]="ngPickedSalesOrg" [options]="salesOrganizations" (selected)="onChange()"placeholder="Pick a SalesOrg"class="colorful-select dropdown-primary"></mdb-select>
<label>Sales Organization</label>
</div>

export class SalesOrganization implements OnInit {

salesOrganizations:any[];

ngPickedSalesOrg:any;

constructor(privatesalesOrgService:SalesOrgDataService) { }

ngOnInit() {

this.salesOrgService.getAll().subscribe(

(salesOrg: any[]) => this.salesOrganizations = salesOrg

);

}

onChange() {

console.log('Picked item has value: '+this.ngPickedSalesOrg);

}

}

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello <a href="https://mdbootstrap.com/support/?user=ak.leimrey">ak.leimrey,</a>

I've prepared something like your example but using fake API. I'm getting data to my component through http.get, and filling material select with this data. For me, everything working fine. I can work on labels and values, but u have to remember, to use specific id of your data from your array.

Take a look at my example code:

.ts file:
<div>
<pre>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);

});

}

}</pre>
</div>
.html file:
<div>
<pre><div class="row">

<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></pre>
</div>
If something isn't clear, feel free to inform me.

Best Regards,

Damian

Please insert min. 20 characters.

Hello ak.leimrey, I've prepared something like your example but using fake API. I'm getting data to my component through http.get, and filling material select with this data. For me, everything working fine. I can work on labels and values, but u have to remember, to use specific id of your data from your array. Take a look at my example code: .ts file:

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);

});

}

}

.html file:

<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>

If something isn't clear, feel free to inform me. Best Regards, Damian

ak.leimrey pro commented 6 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) }

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ak.leimrey

Pro User 179Support score
28Questions 12Answers 0Snippets