Topic: Questions about select-2 component
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>
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.
Smart City Solutions GmbH 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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