bug(mat-dialog): Interpolation and conditional don't work inside material dialogs in custom elements

[gcherem]

Reproduction

Due the complexity to create the environment (custom elements running from an external web site), it is not possible to use StackBlitz to reproduce this issue.

Instead, I created the following repo: https://github.com/gcherem/custom-elements-bug

Steps to reproduce:

1. run npm run build:elements in widget folder to build the scripts
2. put widget/elements files in a web server (I used https://github.com/kzahel/web-server-chrome)
3. double-click html/index.html (depending where you put the scripts, you may need to adapt index.html to find the scripts)
4. click open modal button

Expected Behavior

Should show interpolated text and conditional structural (when satisfied) in material dialogs. By the other hand, everything works outside the dialog (main page).

Actual Behavior

Elements with interpolation {{ ...}} are not renderized at all. As well structural conditions (ngIf), even when the condition is true.

template

<div  class="mat-typography">
  <h2>Widget</h2>
  <p>line 1</p>
  <p>line 2: {{ variable }}</p>
  <p>line 3</p>
  <p *ngIf="show">line 4: This line also does not appear on modal</p>
  <p>line 5</p>
  <p>Cannot see lines 2 and 4 on modal</p>
</div>

PS.: No error reported at the console

Environment

• Angular: 11.1.1
• CDK/Material: 11.1.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOs Catalina

[jelbourn]

@gcherem it looks like change detection isn't running when the dialog opens; the most likely explanation is that the dialog content is created outside of the Angular zone. You should probably be able to fix it by manually re-entering the zone.

[gcherem]

Hi @jelbourn, thank you very much for you reply. I'm not sure how to do that. I tried to surround the dialog opening by ngZone.run this way, but didn't work:

export class WidgetDialogComponent {

  constructor(
    public dialog: MatDialog,
    private zone: NgZone
  ) { }

  onClick() {
    this.zone.run(() => {
      const dialogRef = this.dialog.open(WidgetComponent, {
        height: '400px',
        width: '600px',
    })

    });
  }

Can you provide an example? Thanks in advance.

[jelbourn]

The only other thing I'd have to suggest is injecting ChangeDetectorRef in the content component and calling detectChanges directly. Ultimately I don't think this has anything to do with MatDialog specifically, it seems like some nuance of Angular Elements.

[gcherem]

Hi @jelbourn, I injected ChangeDetectorRef and detectChanges really works, but only when I call it manually (from a button event for instance). Since I need it updated automatically as the modal loads, I tried every hook method from the component lifecycle (ngOnInit, ngOnChanges, etc.) but nothing updated. Any idea on how to get it updated automatically? Thank you again.

[jelbourn]

I'm honestly not sure; I'm not personally as familiar with Angular Elements myself. There should be some way to get the application back to running inside the zone. You might have better luck w/ the Angular community discord or Stack Overflow.

[gcherem]

Thank you anyway @jelbourn!

[zarend]

@gcherem does this issue persist for you?

[wagnermaciel]

Closing because this issue has been inactive for 2 weeks or more after follow up was requested.