Using MatSelect with rxjs fromEvent events not being heard? (selectionChange)

Question

I am trying to get the value from a MatSelect, using rxjs fromEvent. I can't get it to pick up that an event has happened though. I have it working with MatInput, because I think that inherits default behaviour from the Html input element, but something is different with MatSelect.

If I swap out mat-select for a default select, the (change) event is picked up and it works as intended. (change) was apparently deprecated at some point on MatSelect, and no longer works.

I've tried moving the template ID to the mat-option to see if it could pick up an event from there, no luck. tried: (change) (select) (selectionChange) (valueChange)


 @ViewChild('projectNameInput', {static: false, read: ElementRef}) projectNameInput: ElementRef;
 @ViewChild('pipelineSelect', {static: false, read: ElementRef}) pipelineSelect: ElementRef;
 @ViewChild('codeCoverageInput', {static: false, read: ElementRef}) codeCoverageInput: ElementRef;

 ngAfterViewInit() {
   // server-side search
   const projectObs$ = fromEvent(this.projectNameInput.nativeElement, 'keyup');
   const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'onSelectionChange');
   const coverageObs$ = fromEvent(this.codeCoverageInput.nativeElement, 'keyup');

   const all$ = merge(projectObs$, selectObs$, coverageObs$)
     .pipe(
       debounceTime(300),
       distinctUntilChanged(),
       tap(() => {
         this.paginator.pageIndex = 0;
         this.loadSummariesPage();
       })
     )
     .subscribe();

   this.paginator.page
     .pipe(
       tap(() => this.loadSummariesPage())
     )
     .subscribe();
 }

------------------------------------

 <mat-form-field appearance="fill">
   <mat-label>types</mat-label>
   <mat-select name="type" [(ngModel)]="type">
     <mat-option #x *ngFor="let option of options" [value]="option.value">
       {{option.viewValue}}
     </mat-option>
   </mat-select>
 </mat-form-field>

Francesco Francesco · Accepted Answer · 2020-04-20T11:10:10

If you have an Observable you need to subscribe to it if you want to receive stream data.

In your component code you need something like:

selectObs$.subscribe(selectedVal => console.log(selectedVal));

note: Remeber to unsubscribe in the OnDestroy component event, to prevent memory leaks.

UPDATE

1 - In your component you should bind the matSelect and not the matOption. Then you can listen to the selectionChange emitter (like an Observable):

 @ViewChild(MatSelect) select: MatSelect;

Without the need of #x in the template altogether.

2 - Have you tried to change the line from:

const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'onSelectionChange');

to

const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'selectionChange');

I have never worked with the nativeElement's event, but matSelect has an EvenEmitter selectionChange: EventEmitter<MatSelectChange>, so it might be a naming mismatch.

3- use selectionChange emitter:

<mat-select name="type" [(ngModel)]="type">
     <mat-option #x (selectionChange)="onValueSelected()" *ngFor="let option of options" [value]="option.value">
       {{option.viewValue}}
     </mat-option>
 </mat-select>

Using MatSelect with rxjs fromEvent events not being heard? (selectionChange)

1 Answers