1

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.opening()"/>
        </div>
</div>
<app-opening></app-opening>

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);
opening(){
console.log(true);

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

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Angelwong01
  • 11
  • 1
  • Perhaps this might help https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components – eko May 14 '21 at 20:29

1 Answers1

0

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

Hokhy Tann
  • 1,249
  • 1
  • 9
  • 14