Components: Bottom Sheet doesn't detect some async changes

[yosoyju]

Bug, feature request, or proposal:

Component UI inside the Bottom Sheet doesn't seem to update when an async change is started early on (tested in constructor, ngOnInit, ngAfterContentInit, and ngAfterViewInit) but not resolved until after the popup animation is completed.

What is the expected behavior?

Change detection is not affected by the Bottom Sheet.

What is the current behavior?

Change detection seems to not work.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-qkeurg

What is the use-case or motivation for changing an existing behavior?

Changes should always be detected.

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

Angular: 6.1.6
Material: 6.4.7
Mac OSX High Sierra
TS: 2.7.2
Browser: Chrome 68

Is there anything else we should know?

[crisbeto]

That's because the bottom sheet triggers change detection when it's created and when the animation ends, but it doesn't have a way of anticipating when you might have done a change inside a timeout. You can tell Angular yourself when it's supposed to check by calling ChangeDetectorRef.markForCheck. Here's a working fork of your example.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}