mdb-select (angular)

Topic: mdb-select (angular)

dario.bratic pro asked 6 years ago

I have a few problems regarding MDB Select in Angular app:

If I push new value in the array it doesn't work, actually, it is not showing new value in the select drop down.

On change event doesn't work as well.

We are using template driven forms.

Here is extra explanation of both issues:

First issue

// product.component.html

<mdb-select [options]="categoriesOptions" placeholder="Select category" class="colorful-select dropdown-primary" name="category" ></mdb-select>

<label>Category</label>

</div>

// product.component.ts

ngOnInit {

var option;

this.service.getCategories().subscribe(categories => {

categories.forEach(category => {

option = {

value: category.id,

label: category.name

}

this.categoriesOptions.push(option);

});

}

It doesn't work, and in dropdown it says "No resoults found".

Than i tried this

ngOnInit {

var option1 = {value: '1', label: 'option1'}

var option2 = {value: '2', label: 'option2'}

var option3 = {value: '3', label: 'option3'}

var option4 = {value: '4', label: 'option4'}

this.categoriesOptions.push(option1)

this.categoriesOptions.push(option2)

this.categoriesOptions.push(option3)

this.categoriesOptions.push(option4)

}

And it also doesn't work, which means that you can't push new option.

I figure it out that it works only if you create one array, populate it with data and than assign that array to your options array.

ngOnInit {

var option1 = {value: '1', label: 'option1'}

var option2 = {value: '2', label: 'option2'}

var option3 = {value: '3', label: 'option3'}

var option4 = {value: '4', label: 'option4'}

var categories = [];

categories.push(option1)

categories.push(option2)

categories.push(option3)

categories.push(option4)

this.categoriesOptions = categories

}

Second issue

<mdb-select [options]="categoriesOptions" placeholder="Select category" class="colorful-select dropdown-primary" [(ngModel)]="product.categoryId" name="category" >

</mdb-select>

<label>Category</label>

It throws error "Uncaught (in promise): TypeError: Value must be a string or an array." But my value should be categoryId: number. And in form-edit it doesn't bind value from model.

This works fine if I use standard HTML select.

henry steven salazar serrano free commented 4 years ago

how can I manage the message "No results found". to put it in other language???????

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear <a href="/profile/?id=47727" target="_blank" rel="nofollow">@The Orange Dev House</a>

Could you please describe, what's wrong with selecting the number in <code><mdb-select></code> element?

Please take a look at the below code - There's a select's data array objects: {value: number, label: string}, and I'm able to preselect number value from the beginning.

.html:

.ts:

<pre class="prettyprint"><code>dateOptionsSelect= [
 { value: 1, label: 'Today'},
 { value: 2, label: 'Yesterday' },
 { value: 3, label: 'Last 7 days', selected: true },
 { value: 4, label: 'Last 30 days' },
 { value: 5, label: 'Last week' },
 { value: 6, label: 'Last month' }
 ];
 selectedValue = 3;
</code></pre>

Please let me know because as I see, there's nothing wrong (tested with the 7.5.1 version).

Best Regards,

Damian

Please insert min. 20 characters.

Dear @The Orange Dev House

Could you please describe, what's wrong with selecting the number in <mdb-select> element?

Please take a look at the below code - There's a select's data array objects: {value: number, label: string}, and I'm able to preselect number value from the beginning.

.html:

<mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" placeholder="Choose time period"></mdb-select>

.ts:

dateOptionsSelect= [
    { value: 1, label: 'Today'},
    { value: 2, label: 'Yesterday' },
    { value: 3, label: 'Last 7 days', selected: true  },
    { value: 4, label: 'Last 30 days' },
    { value: 5, label: 'Last week' },
    { value: 6, label: 'Last month' }
  ];
  selectedValue = 3;

Please let me know because as I see, there's nothing wrong (tested with the 7.5.1 version).

Best Regards,

Damian

Add comment

The Orange Dev House pro answered 5 years ago

0 0 Best answer

Still no response from your team. We are a paying customer.

Arkadiusz Idzikowski staff commented 5 years ago

We are still working on this issue, however, we have some problems reproducing this bug.

Could you provide an example html and ts code that is not working for you? Which version of MDB Angular do you use?

Add comment

The Orange Dev House pro answered 5 years ago

0 0 Best answer

With the above, the category (product.categoryId) is not selected. The mdb-select would be blank.

Arkadiusz Idzikowski staff commented 5 years ago

We will take a closer look at this problem.

The Orange Dev House pro commented 5 years ago

Our live project is dependent on this. We await to hear from you soon.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @The Orange Dev House

Could you please describe your problem? What's wrong?

Please explain your problem, because this ticket is 1 year old.

Best Regards,

Damian

Add comment

Sebastian Kaczmarek staff answered 6 years ago

0 0 Best answer

Hi dario.bratic,

Let me address your issues in a list.

1. If I push new value into the array it doesn’t work. [...] I figure it out that it works only if you create one array, populate it with data and then assign that array to your options array.

Actually, this is how Angular works. It does not re-render the view unless it detects a change that affects some <code>@Input()</code> or other values bound to the view. To make Angular re-render <code><mdb-select></code> you have to change the array with <code>categoriesOptions</code>. A quick workaround for this is reassign the array with options after pushing a new value with this simple line of code:

<code>this.categoriesOptions = this.categoriesOptions.slice();</code>

2. On change event doesn’t work as well.

Our <code><mdb-select></code> does not trigger typical <code>change</code> event. Instead, it emits an event called selected and you use it like this:

In app.component.html:
<pre><mdb-select [options]="categoriesOptions" placeholder="Select category" (selected)="log($event)" class="colorful-select dropdown-primary" name="category" ><mdb-select></pre>
and in app.component.ts
<pre> log(e: any) {
 console.log(e)
 }</pre>
I hope it helps!

Best regards,
Sebatian

Please insert min. 20 characters.

Hi dario.bratic, Let me address your issues in a list. 1. If I push new value into the array it doesn’t work. [...] I figure it out that it works only if you create one array, populate it with data and then assign that array to your options array. Actually, this is how Angular works. It does not re-render the view unless it detects a change that affects some @Input() or other values bound to the view. To make Angular re-render <mdb-select> you have to change the array with categoriesOptions. A quick workaround for this is reassign the array with options after pushing a new value with this simple line of code: this.categoriesOptions = this.categoriesOptions.slice(); 2. On change event doesn’t work as well. Our <mdb-select> does not trigger typical change event. Instead, it emits an event called selected and you use it like this: In app.component.html:

<mdb-select [options]="categoriesOptions" placeholder="Select category" (selected)="log($event)" class="colorful-select dropdown-primary" name="category" ><mdb-select>

and in app.component.ts

  log(e: any) {
    console.log(e)
  }

I hope it helps! Best regards, Sebatian

NCIIT free commented 6 years ago

Hi Sebastian It really helped! Could this be added in mdb-select (Angular) description, this would be very helpful.

The Orange Dev House pro commented 5 years ago

You didn't answer the second issue.

henry steven salazar serrano free commented 4 years ago

how can I manage the message "No results found". to put it in other language???????

Bartosz Termena staff commented 4 years ago

@henry steven salazar serrano

Just add to <mdb-select> notFoundMsg="Your own message"

Hope it helps. Best Regards, Bartosz.

Sujan Maharjan free commented 3 years ago

when [multiple] ='true', the event is undefined. Could you please look into it?

Also (selected) triggers event only when the value is selected, when trying to unselect the selected item, the event is not triggered.

Its so disappointing that this mdb-select doesnt have enough features.

Arkadiusz Idzikowski staff commented 3 years ago

@Sujan Maharjan please provide more information about the problem. Which version of MDB Angular library do you use and which select component (mdb-select or mdb-select2)?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

dario.bratic

Pro User 5Support score
2Questions 0Answers 0Snippets