angular conditional html binding

Question

I need to conditionally add an extra html as a div content. For now I did it this way:

before:

<div *ngFor="let cell of cells" class="cell"
    [innerHTML]="cell.dataWithHtml"
></div>

after:

<div *ngFor="let cell of cells" class="cell">
    <img *ngIf="cell.isSpecial" src="whatever"/>
    <div class="this_div_should_not_exist" [innerHTML]="cell.dataWithHtml"></div>
</div>

But this adds an extra div.

How this block can be rewritten without adding extra div?

Possible duplicate question https://stackoverflow.com/questions/39857858/angular-2-domsanitizer-bypasssecuritytrusthtml-svg — Taras Yaremkiv, Apr 06 '20 at 10:22
It is not a question about escaping html. This is a question about adding extra conditional html to inner html, I think I can try to use a pipe, for adding extra html. — Sergej, Apr 06 '20 at 10:29
brilliant mind,, you just replaced div with span. I do not want to add ANY extra html tags. — Sergej, Apr 06 '20 at 10:42

score 1 · Accepted Answer · answered Apr 07 '20 at 16:01

1

Use outerHTML on the div you wish to disappear/replace - you can't use ng-container.

<div class="this_div_should_not_exist" [outerHTML]="cell.dataWithHtml"></div>

answered Apr 07 '20 at 16:01

Ash

11,292
4
27
34

angular conditional html binding

1 Answers1