can import module html tag in modal whit a function?

my example is the next in the modal html:

<h1 mat-dialog-title class="title-dialog">
    <b>{{ data.title }}</b>
</h1>
<div class="body_modal">
    {{ data.body }}
</div>
                    

modal code ts:

constructor( public dialogRef: MatDialogRef<GeneralComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

code in the component where I call the modal html:

<div class="col-md-2">
        <div class="ico-image">
          <img src="assets/icons/complete.svg" (click)="this.openning()"/>
        </div>
</div>
<app-openning></app-openning>

code in the component where I call the modal ts:

showModal( name,body) {
const title = name;
const body = body;
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
  id: 1,
  title: nombre_titulo,
  body: body_graphic,
};
this.dialog.open(GeneralComponent, dialogConfig);
openning(){
console.log(true);

this.showModal(
    "openning",
  `<app-openning></app-openning>`
 
)  }

With this code the modal is shown in text, I want to show the component inside the modal, thanks for your help

1 answer

  • answered 2021-05-15 10:46 Hokhy Tann

    Use <pre> tag to encapsulate the inner component in your modal template.