3

I have an md-select in my form with multiple options (same as demo in Angular Material site). It shows a comma separated list of selected options in its input field. Is there any way to change separator? (for example change comma to star or another UTF-8 character).

hadi.mansouri
  • 828
  • 11
  • 25

1 Answers1

2

You can do something with pure CSS. You should hide the commas using visibility: collapse and after that, you can add a Unicode icon with :after or :before pseudo-element.

PLUNKER

HTML

<md-select class="my-select" ng-model="vm.selectedItem" multiple>
  <md-option ng-value="item.id" ng-repeat="item in vm.items">{{ item.name }}</md-option>
</md-select>

CSS

.my-select[multiple] .md-select-value span:first-child {
  visibility: collapse;
}

.my-select[multiple] .md-select-value .md-text {
  display: inline-block !important;
  visibility: visible;
}

.my-select[multiple] .md-select-value .md-text:not(:last-child):after {
  content: '\2605'; /* star */
  margin: 0 -5px 0 5px;
}

There you go a list of Glyphs that you can use.
Also, you can add a font-awesome icon with css if you want.

hadi.mansouri
  • 828
  • 11
  • 25
The.Bear
  • 5,621
  • 2
  • 27
  • 33
  • for me, the template code generated does not have the comma character as the content for :after pseudo selector, hence it is not able to target it using the :after selector. – Masroor Apr 18 '20 at 09:54
  • @Prime could you share your version of angular material so I can update my answer if that possible? – The.Bear Jun 24 '20 at 15:52
  • Thanks. Little imporvement: first selector should be `.my-select[multiple] .md-select-value span:first-child:has(>div)`. In other case it hides title for select if nothing selected. – Drunya Mar 06 '23 at 16:57