1

I have a modal service that takes an object as a parameter like this:

    modal = {
      title: My Modal,
      body: template
    }

This gets passed to a modal component that holds the template for the modal (using bootstrap 4).

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="onCancel()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body" [innerHtml]="body | keepHtml"></div>
<div class="modal-footer">
    <button (click)="onCancel()" class="btn">
        <span>Cancel</span>
    </button>
    <button (click)="onOk()" class="btn btn-primary">
        <span>Ok</span>
    </button>
</div>

The body is passed through a sanitization pipe based on this: https://medium.com/@AAlakkad/angular-2-display-html-without-sanitizing-filtering-17499024b079

Everything works fine until I try to use a custom component selector in the body and it's not displayed. I don't get a sanitization error in the console. Anyone know why this is happening and how to fix it?

g_madden
  • 11
  • 1

1 Answers1

2

That's not related to sanitization. Angular just doesn't support do create components this way dynamically. Angular generates JavaScript code for Angular specific markup when you build your Angular application. Markup added at runtime doesn't have any such effect.

For a way to compile componets at runtime see How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • What if it was not dynamically added such as a tabset of objects that is compiled on at build time? The reason I ask is before implementing the sanitization pipe I **was** getting a sanitization error for custom components – g_madden Nov 03 '17 at 20:24
  • How is sanitization related to components compiled at build time? Perhaps it's better to create a new question with code that demonstrates what you try to do – Günter Zöchbauer Nov 03 '17 at 21:33