I am currently working on developing a reusable module. Within this module, I aim to create a functionality that allows for opening different components using the MatDialog. Let's refer to one of these components as StartActionComponent. Typically, I would utilize the following code:
export class StartActionComponent{
async startbuttonClicked(e: SomeEvent){
const dialogRef = this.dialog.open( SomeModalComponent , {data: e});
}
}
This approach works effectively; however, I now seek to dynamically inject another component, for instance, SomeModalComponent2. My attempts to achieve this are outlined below:
DashboardModule
export const START_COMPONENT = new InjectionToken<any>('START_COM');
export class DashboardModule {
static forRoot(conf: {
onStart: any
}):ModuleWithProviders<DashboardModule>{
return {
ngModule: DashboardModule,
providers: [
{
provide: START_COMPONENT, useValue: conf.onStart
}
]
}
}
}
within the StartActionComponent component.
StartActionComponent
constructor(
@Inject(STOP_COMPONENT) startComponent: any) {}
async startbuttonClicked(e: SomeEvent){
const dialogRef = this.dialog.open( this.startComponent , {data: e});
}
and within app.module.ts
AppModule
import { SomeModalComponent2 } from 'some.modal2.component`;
@NgModule({
import: [DashboardModule.forRoot(onStart: SomeModalComponent2)]
})
My goal is to exclude the use of any and define a specific type for:
static forRoot(conf: {onStart: any})
or
@Inject(STOP_COMPONENT) startComponent: any) {}
Although I have attempted utilizing ComponentType, I have had little success.