I am trying to use mat-dialog in my angular custom element. I works fine when in the angular app but can't seem to bundle the material theme while building to custom element.
When i inspect the code outside of angular app, no style is attached to any of the cdk class. Everything seem to work fine when running in the angular server. How do i include the needed css with the custom element?
My app.module file
@NgModule({
[ ...
MatFormFieldModule,
MatIconModule,
MatSelectModule,
MatInputModule,
MatDialogModule,
...
],
providers: [ConnectBackendService],
entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const el = createCustomElement(AppComponent, { injector });
customElements.define('my-element', <Function>el);
}
ngDoBootstrap() {}
}
and my styles.css file
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
My dialog should have absolute positioning, should be aligned to the center of the window and should have a backdrop. Currently, none of these applies to the dialog box
