I'm encountering issues while attempting to combine two different observables and display the results in a Material Select component.
This example (created using the Material docs tool) demonstrates what I'm trying to achieve. However, the options are not being shown.
In my current code (on my local machine), the problem I'm facing is: the first Observable passed to the concat operator gets subscribed to and all items are displayed in the Select. However, I suspect that the first Observable never completes. It seems like the material-select component is not "completing" the first Observable, thus causing the concat operator to not subscribe to the next Observable while the first one remains incomplete, as mentioned in the documentation:
Note that if some input Observable never completes, concat will also never complete and Observables following the one that did not complete will never be subscribed.
What I require is to take two different Observables (each with different data), combine them using concat (or any other operation), and ultimately display all the data merged as options in a single select component.
For reference, here's the code snippet to ensure it's not lost in the future:
// Component:
import { Component, Input } from '@angular/core';
import { from } from 'rxjs';
import { concatWith } from 'rxjs/operators';
interface Option {
value: number;
label: string;
}
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample {
@Input()
options$: any;
constructor() {}
ngOnInit() {
// Pretend this data is coming from API 1
const sourceA$ = from([
{ value: 1, label: 'Value 1' },
{ value: 2, label: 'Value 2' },
{ value: 3, label: 'Value 3' },
]);
// And this data is from API 2
const sourceB$ = from([
{ value: 4, label: 'Value 4' },
{ value: 5, label: 'Value 5' },
{ value: 6, label: 'Value 6' },
]);
// Concatenate the data from both observables and display all options in a Select component:
this.options$ = concatWith(sourceA$, sourceB$);
}
}
And here's the template:
<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
<mat-label>Select some value:</mat-label>
<mat-select>
<mat-option
*ngFor="let option of (options$ | async)"
[value]="option.value"
>
{{option.label}}
</mat-option>
</mat-select>
</mat-form-field>