Mat-select multiple rtl direction display reverse selected items text

Question

I Use Mat-select with multiple option

I order my data with custom order pipe.

I set the direction to rtl ,

the mat-select display the items in the correct order, but the inner text that display the selected items appears backwards.

For example :

The display text in the input :

ג,ב,א 

instead of

א,ב,ג 

My Mat Select Example

Any Idea?

Answer 1

you can use mat-select-trigger inside your mat-select

and display the value of the selected their.

your code would look like:

  <mat-select name="subjectCtrl"
                    multiple
                    #subjectCtrl='ngModel'
                    required
                    [(ngModel)]="selectedSubjectsList">
          <mat-select-trigger>
              selectedText
          </mat-select-trigger>
          <mat-option *ngFor="let subject of subjectList"
                      [value]="subject.Code">
            {{subject.Desc}}
          </mat-option>
</mat-select>