Angular Custom Elements & Angular 8 Material: MatDialog and MatMenu not working

[yash0412]

I am using angular custom elements to build an application in which a MatDialog is part of the custom element. I have a MatMenu in the host application as well. Problem is, when I open the mat-dialog on page load and then open the mat-menu, the mat-dialog is not working afterwards, otherwise if I open the menu first and then the mat-dialog, then the menu doesn't work anymore.

You can find the stackblitz at : https://stackblitz.com/edit/angular-nr58ab-tbu38h

I have added the main.js code of the MatDialog application in the index.html itself. The main.js was generated after building the app with ngx-build-plus in prod mode with output-hashing none and single-bundle true.

The MatDialog app code is like this:

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { NgModule, Injector } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { createCustomElement } from "@angular/elements";

import { MatDialogModule, MatButtonModule } from "@angular/material";


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const myCustomElement = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define("app-test-data", myCustomElement);
  }
  ngDoBootstrap() {}
}

app.component.ts

import { Component, Input, TemplateRef } from "@angular/core";
import { MatDialog } from "@angular/material";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}
  openModal(temp: TemplateRef<any>) {
    this.dialog.open(temp, { width: "100px", height: "100px" });
  }
}

and the app.component.html

<button mat-raised-button (click)="openModal(modal)">Open</button>

<ng-template #modal>
  <mat-dialog-content>
    Hello
  </mat-dialog-content>
</ng-template>

This is the app I have built and put inside the index.html of the app in the stackblitz.

I am stuck with this for some time now, I have tried running the dialog.open() inside NgZone.run() also, but no luck there either. Thanks.

Angular Setup:

Angular CLI: 8.3.21
Node: 13.6.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.803.21
@angular-devkit/build-angular 0.803.21
@angular-devkit/build-optimizer 0.803.21
@angular-devkit/build-webpack 0.803.21
@angular-devkit/core 8.3.21
@angular-devkit/schematics 8.3.21
@angular/cdk 8.2.3
@angular/cli 8.3.21
@angular/material 8.2.3
@ngtools/webpack 8.3.21
@schematics/angular 8.3.21
@schematics/update 0.803.21
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2

[yash0412]

I'm having the same problem, @yash0412 do you have any update?

Nothing yet. Have moved some components to other libraries.

[wesselvdv]

I think I am having the same issue, seems that there's something wrong the with animations defined in mat-menu in my case. First time always works, any attempt thereafter does seem to create everything but the css on the mat-panel is wrong. (It seems to be stuck after the first step of the transFormMenu animation)

UPDATE:

I managed to fix my issue, I had a directive on the parent element of the MatMenuTriggerFor that seemed to make stuff go apeshit. Upon removal I everything worked again!

[yash0412]

@wesselvdv Can you please elaborate. My problem is also on mat-menu, however mat-tooltips also doesn't work.

[wesselvdv]

@wesselvdv Can you please elaborate. My problem is also on mat-menu, however mat-tooltips also doesn't work.

Can you show the code in question that isn't working? Also any parent element with directives on it might be useful.

[yash0412]

@wesselvdv The code that I've given above doesn't work. You can check this stackblitz out https://stackblitz.com/edit/angular-nr58ab-tbu38h. Thanks.

[wesselvdv]

@yash0412 Oh apologies, didn't realise that. Seems a quite different case than what I had. I had an issue with it not showing up, but it was rendered. This doesn't seem to fire at all?

[yash0412]

@wesselvdv In my case the elements are showing up, but after clicking they stop working, as in the matDialog doesn't open

[umertauheed]

Did you find a way out of it ?

[yash0412]

Did you find a way out of it ?

I have upgraded to angular 9, this issue is fixed in it.