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 stackoverflow.com/questions/39857858/… — Taras Yaremkiv
– Taras Yaremkiv, Commented Apr 6, 2020 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
– Sergej, Commented Apr 6, 2020 at 10:29

Ash · Accepted Answer · 2020-04-07 16:01:46Z

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 7, 2020 at 16:01

Ash

11.5k4 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular conditional html binding

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related