Topic: mdb-select-2 label with thml

Karman40 premium asked 2 years ago


How can I give a unique htmlt to the mdb-select-2 label?

      <mdb-select-2 [outline]="true" [optionHeight]="38" [label]="'Sex:'" [label]=""></mdb-select-2>

Label: Any string: <app-reguired-star></...>

enter image description here


Arkadiusz Idzikowski staff commented 2 years ago

Currently it's not possible. We need to somehow manage the label state on our end, but with the current HTML structure of this form control, it is problematic.


Karman40 premium commented 2 years ago

Have there been any developments?


Arkadiusz Idzikowski staff commented 2 years ago

So far there have been no changes related to the HTML label. As I mentioned before, we have deliberately abandoned this solution due to the fact that it is difficult to manage such a label when we do not have a parent component to manage its state.


Karman40 premium commented 2 years ago

Dear MDB!

when is it expected to fix the bug in the package? Are there any plans to correct this bug at all?


Arkadiusz Idzikowski staff answered 2 years ago


This is not a bug, this functionality has not been implemented at all due to the problem I mentioned earlier. We would need another external directive or component to manage the state of the form controls and that would mean a complete change in how the form controls work in MDB.

The select label is still a normal HTML node and you can easily inject another element there. Here is an example:

  ngAfterViewInit() {
    const label = document.querySelector('.mdb-select-label');
    const star = document.createElement('span');
    const starText = document.createTextNode('*');
    star.appendChild(starText);
    star.classList.add('required-star');
    label?.appendChild(star);
  }

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: Yes
  • Provided link: No