Opening modal conditionally in Angular material

I'm using Angular Material Dialog to open a modal. In the modal that opens, I have few components that every time a different one should be loaded based on a condition. The thing is, I tried to pass the .open() method the component name as a string, and it gives error.

.open()

For example, let's say this the method:

openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
});


I tried to do something like:

let myComp: string = 'DialogOverviewExampleDialog';

openDialog(): void {
const dialogRef = this.dialog.open(this.myComp, {
width: '250px',
});


But it gives error. It just don't get a variable as a parameter to the function.

The reason I need to pass the name as a string, so I can create a condition, assign for each condition the component that should be open in the modal, then just pass the .open() method the variable with the name of the desire component to be load

.open()

What's wrong?

Thanks.

1 Answer
1

The DialogOverviewExampleDialog is a class. So modify your code to

let myComp: any = DialogOverviewExampleDialog;

openDialog(): void {
const dialogRef = this.dialog.open(this.myComp, {
width: '250px',
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.