I’m using a custom built mat-select, where user adds a range of numbers and I need to show the selected ranges (or at least something) when dropdown is closed, but can’t find an option for this.

This is my .html:

        <mat-form-field appearance="outline" class="mat-form-field-header-filter">
          <mat-label>Selecteer week</mat-label>
          <mat-select [formControl]="weekRangeSelect" [compareWith]="fakeWeekRange">
            <mat-select-trigger>asda</mat-select-trigger>
            <mat-option class="week-selector" (click)="$event.preventDefault()" disabled>
              <span>Van</span>
              <span class="input">
                <input matInput type="text" min="1" max="52" #weekFrom>
              </span>
              <span>tot</span>
              <span class="input">
                <input matInput type="text" min="1" max="52" #weekTo>
              </span>
              <span>week(s)</span>
              <button mat-button color="primary" (click)="addWeekRange()">Add</button>
            </mat-option>
            <mat-option class="week-warn" disabled *ngIf="weekInvalidRange">
              Invalid range provided!
            </mat-option>
            <mat-option class="week-warn" disabled *ngIf="weekAlreadyAddedRange">
              Range already added!
            </mat-option>
            <ng-container *ngFor="let weeks of selectedWeeks; let i = index">
              <mat-option class="week-remove-selector">
                <span>
                  {{ weeks.from }} - {{ weeks.to }}
                </span>
                <span>
                  <button mat-icon-button (click)="removeWeekRange(i)">
                    <mat-icon>delete</mat-icon>
                  </button>
                </span>
              </mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>

and this is my .ts:

  @ViewChild('weekFrom', {static: true}) weekFrom: ElementRef<HTMLInputElement>;
  @ViewChild('weekTo', {static: true}) weekTo: ElementRef<HTMLInputElement>;

  public selectedWeeks: { from: number; to: number }[] = [];
  public weekInvalidRange: boolean = false;
  public weekAlreadyAddedRange: boolean = false;
  public weekRangeSelect: FormControl = new FormControl<string>('');

  addWeekRange(): void {
    const from: number = parseInt(this.weekFrom.nativeElement.value, 10),
      to: number = parseInt(this.weekTo.nativeElement.value, 10);
    let add: boolean = true;
    if (from !== null && to !== null && !isNaN(from) && !isNaN(to) && typeof from !== 'undefined' && typeof to !== 'undefined') {
      this.selectedWeeks.forEach((r: { from: number, to: number }): void => {
        if (from < 1 || to > 52 || from > to) {
          add = false;
          this.weekInvalidRange = true;
          setTimeout((): boolean => this.weekInvalidRange = false, 5000);
        } else if (from <= r.to && r.from <= to) {
          add = false;
          this.weekAlreadyAddedRange = true;
          setTimeout((): boolean => this.weekAlreadyAddedRange = false, 5000);
        }
      });
      if (add) {
        this.selectedWeeks.push({
          from: parseInt(this.weekFrom.nativeElement.value, 10),
          to: parseInt(this.weekTo.nativeElement.value, 10)
        });

        this.weekFrom.nativeElement.value = '';
        this.weekTo.nativeElement.value = '';
      }
    }
    this.selectedWeeks = this.selectedWeeks.sort((a, b) => a.from - b.from);
    this.weekRangeSelect.setValue(this.selectedWeeks.map(d => d.from + '-' + d.to).join(', '));
  }

  removeWeekRange(index: number): void {
    this.selectedWeeks.splice(index, 1);
    this.weekRangeSelect.setValue(this.selectedWeeks.map(d => d.from + '-' + d.to).join(', '));
  }

  fakeWeekRange(a, b): boolean {
    return this.selectedWeeks.length > 0;
  }

  formatSuspectDropdown(result: any): string {
    return result !== null && typeof result === 'object' ? result.name : result;
  }

But the mat-select still shows a placeholder when a week range were added and when the dropdown is closed.

How to show selected week ranges when user closes a dropdown?

Stacklitz demo: https://stackblitz.com/edit/stackblitz-starters-8dyqtv?file=src%2Fweek-picker%2Fweek-picker.component.ts