Topic: Questions about select-2 component

ATLAS IoT Tech GmbH free asked 4 years ago


Hello MDB Community,

I have several problems with the new recommended to use select element.The first thing is that I want to add custom HTML to the label tag. I add normally an orange star to the label. How can I do it in the new style?

The next thing is how can I reset the value of select component in code, I want to clear the selection and set the value again to null.

Resources

Old label style:

<label for="test">test<sup class="deep-orange-text">*</sup></label>

New label style:

<div class="md-form">
  <mdb-select-2 placeholder="Choose your option" label="Example label">
    <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
  </mdb-select-2>

Arkadiusz Idzikowski staff answered 4 years ago


Currently, it's not possible to add HTML element to the Select2. We didn't add this feature to the new component because it's not possible to manage the state of this label easily when select is not inside a parent component. We need to think about a better solution for this feature.

As for the value resetting, we need to fix the problem with change detection when value of the form control changes. For now you can use allowClear option to render the clear button.


ATLAS IoT Tech GmbH free commented 4 years ago

@Arkadiusz IdzikowskiThere is a terrible solution for the reset problem. Current my code is not capable to use it, but I start to refactor it.

If you can access the select as ViewChild you can set the value to null and call ngOnInit.

@ViewChild("select") public select: MdbSelectComponent;
this.select.ngOnInit();

I think that's a terrible solution, but if somebody has the problem he can you it.

"allowClear" is not working for me, I want to create two selects that are related to each other. If the value in select one is selected than select two shout be cleared.



Please insert min. 20 characters.

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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No