Displaying Mat-dialog with Common Component

Question

I have written a logic to open the mat-dialog when click operation is done on table elements. If different column values are clicked then different content should display in the dialog box. Basically I want to create a component for the dialog box(Only one), now the same component must be used to display different content

I achieved the output with creating different components for each column elements and also using ng-template in the table component so that no components can be created.

HTML code of table

<div(click)="onClick(topCol,data[topCol]);">{{data[topCol]}}</div>

TS file of table

onClick(columnheader: string, columnvalue: any) {
    if (this.alertValues.indexOf(columnheader) >= 0) 
    {
      this.dialogService.openConfirmDialog(columnheader);
    }
  }

Calling Service to open the particular component

openConfirmDialog(msg) {
   if(msg=="totalSuccessful") 
    {
      this.dialog.open(TotalSuccessfulComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
    }
    else if(msg=="totalBussinessSkip") 
    {
      this.dialog.open(TotalBussinessSkipComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
    }
    else if(msg=="totalTechnicalSkip") 
    {
      this.dialog.open(TotalTechnicalSkipComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
    } 

But i want different Dialog Content with same component

Answer 1

This can be used to achieve your requirement

openConfirmDialog(msg) {
  this.dialog.open(CommonDialogComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
}

common dialog component int ts

constructor(@Inject(MAT_DIALOG_DATA) public data: matDialogData) {}

someAction(){
  if(this.matDialogData.message==='something'){
 perform that respective operation.
 }
 }

in HTML

<div *ngIf="matDialogData.message==='something'">
 show respective data / component etc... 
</div>

Hope it helps!

Answer 2

Try it like this:

import { ComponentType } from '@angular/cdk/portal';


openConfirmDialog(msg) {
  let dialog: ComponentType<any> = this.getComponent(msg);
  /* or
   let dialog: ComponentType<TotalSuccessfulComponent|TotalBussinessSkipComponent|TotalTechnicalSkipComponent > = this.getComponent(msg);
  */
   this.dialog.open(dialog,
    {
      width: '300px',
      height: '200px',
      data:{
        message:msg
      }
    });
}

getComponent(msg: string) {
  switch(msg) {
   case 'totalSuccessful': return TotalSuccessfulComponent;
   case 'totalBussinessSkip': return TotalBussinessSkipComponent;
   case 'totalTechnicalSkip': return TotalTechnicalSkipComponent;
  }
}

Answer 3

You can have one component and pass data into it

@Component({
  selector: 'generic-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class GenericDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {
      // data is your {message:msg } you are passing from service
  }
}

So now inside of you service you dont need to open different components

this.dialog.open(GenericDialog ,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });