Mat Select displaying empty options with Observable

Question

I am creating mat-select options using results from Observable but the options are not rendering. When it simple array it is rendering.

Following is the example i build - See here

Answer 1

In your example you are using from observable. Instead use of observable, it will convert your simple array to observable that will work with async pipe.

ngOnInit(): void {
    this.toppingList = of(['a', 'b']);
  }

Difference between of and from when passing an array-like structure (including strings):

Observable.of([1, 2, 3]).subscribe(x => console.log(x));

would print the whole array at once.

On the other hand,

Observable.from([1, 2, 3]).subscribe(x => console.log(x));

prints the elements 1 by 1.

For strings the behaviour is the same, but at character level.