Components: mat-bottom-sheet binding data to template

[badpaybad]

Bug, feature request, or proposal:

I use sample in https://stackblitz.com/angular/nvppaoepjnel?file=app%2Fbottom-sheet-overview-example.ts
modify a bit code

mat-bottom-sheet component
export class BottomSheetOverviewExample {
...
title='init value must change after 3 seconds';
onOnInit(){
setTimeout(() => {
this.title = "val after 3 seconds";
console.log(this.title);
}, 3000);
}

What is the expected behavior?

{{title}} in html will change after 3 seconds

What is the current behavior?

{{title}} no change

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/angular/nvppaoepjnel?file=app%2Fbottom-sheet-overview-example.ts
I change a bit code as image attached

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

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

Angular version 6, Material 2, win 10, Typescript latest, Chrome latest

Is there anything else we should know?

[badpaybad]

sorry i miss typing ngOnInit

[Jass91]

I have the same problem. After a HTTP request, I wish stop my spin, but I can't put it to work.

[m-spyratos]

@badpaybad I'm facing the same issue. Did you find a solution?

[Jass91]

Nope, sorry, in my case, I wanted to show a loading on button when clicked, and stop it when finished, but does not worked, so, i just close the MatBottomSheet on button click and show the load as a full screen spin controlled from other component.

[m-spyratos]

@Jass91, thanks for letting me know. Seems to be a bug then. I don’t see any open issue to fix this either.

[Jass91]

:) so we can open it. good luck

[badpaybad]

Here is my trick , It worked well for me, hope this help :)

https://angular.io/api/core/ChangeDetectorRef

ngOnInit() {
this.categoryTitle = this.data.categoryTitle;
this.homePageService.getProductsInMenu(this.data.categoryId).subscribe((products) => {
this.products = products;
this.changeDetectorRef.markForCheck();
});
}

[Gaiidenn]

I'm also facing this issue... The workaround provided by @badpaybad seems to work, but the view SHOULD AUTOMATICALLY reflect changes without having to manually call to changeDetectorRef
=> Could you please re-open this issue to have a chance to fix this?

[gizmodus]

Same issue here. @badpaybad's workaround works for me as well.

[AdrienCasta]

this.changeDetectorRef.detectChanges(); as a workaround worked for me.

[dfloresgonz]

@badpaybad thanks a lot!! your solution worked! I'd to know if they will fix this so we don't have to manually update de ui.
Just to add to your answer:
import {ChangeDetectorRef} from '@angular/core';

[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._}