0

Load existed and newly created components into Dialog

I tried many ways I know and finally, I followed this answer.

It works fine but it must pass the component reference here 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
   constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogDialog, {
      width: '250px',
      data: { component: DynamicComponent } // here
    });
  }

}


@Component({
  selector: 'dynamic-comp',
  template: `
  <div>Dynamic component</div>`
})
export class DynamicComponent {

}

for now i create this service 

export class OpenModalService {
   dialogconfig = new MatDialogConfig();

  constructor(
    private layoutSvc: LayoutService,
    private dialog: MatDialog) {
      // this.dialogconfig.disableClose =true;
      this.dialogconfig.autoFocus = true;
      this.dialogconfig.width = '60%';
    }
    }
    openModal(modal){
    
      if (modal !== undefined) {
        switch (modal) {
          case 'Component1':
            this.opendialogforcomponent1();
            break;
            ...}}

but i know there is better way to create service that takes a component name and return the component reference to open it on the dialog of course without creating a static map like this

let mapping = [
    {'name':'name1', 'component':Component1},
    {'name':'name2', 'component':Component2},
    {'name':'name3', 'component':Component3},
];

because I don't want to modify on service every time I add a new component.

taha mosaad
  • 567
  • 5
  • 13
  • Given how likely that this question is a duplicate you should go through why your question is not the same as others such as https://stackoverflow.com/questions/48723439 – Andrew Allen Aug 18 '19 at 17:11
  • thanks @AndrewAllen i already followed this answer stackoverflow.com/questions/48723439 but in my case i have multiple components created and will created in answer he use only one component (dynamic-component) – taha mosaad Aug 18 '19 at 20:52
  • 1
    Finally found best solution in this [answer](https://stackoverflow.com/a/47157691/8699767) – taha mosaad Aug 19 '19 at 12:27

0 Answers0