Nested 'mat-expansion-panel' initialization code: Promise does not work as expected.

[mfursov]

What is the expected behavior?

Behavior is the same for Observable & Observable.toPromise()

What is the current behavior?

When using Observable a nested expansion panel works correctly during initialization.
When using a Promise obtained with Observable.toPromise() a nested expansion panel ends up in an incorrect state.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ysxach?file=app%2Fexpansion-overview-example.ts
Try to comment line 17 and uncomment line 20 to see the correct behavior. (this way you remove use of promise from the top level panel)
or comment line 29 and uncomment line 26 (this way you remove use of promise from the nested panel)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.2.0, Chrome 71, Ubuntu Linux, TypeScript 3.2.2

Is there anything else we should know?

It looks to me this a problem with initial animation of expansion panel.
If I convert the observable to a promise with a delay that is enough to finish initial animation (uncomment line 32 for demo) the promise based solution works as expected