CODEWITHSUNDEEP
angularsanitizationangular-dom-sanitizer
g_madden
g_madden

Reputation: 11

Angular 4 sanitize pipe strips custom components

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?

Upvotes: 1

Views: 579

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658067

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?

Upvotes: 2

Related Questions