0

When rendering html anchor tags in an ng-container using ngFor, spaces between the tags are removed. The result is that the contents overflow the parent container.

I've tried adding a space inside a span and have used   but these get removed on rendering.

<ng-container *ngFor="let tag of tags">
    <a [innerHTML]="tag"></a>
    <span>&#32;</span>
</ng-container>

The only way I've found is to add a space and another character (eg | pipe) and to style that as transparent so not visible.

<span class="wrap-hack"> |</span>

CSS

.wrap-hack {
    color: transparent;
}

Although that works, the breaking space allows word wrapping, it's a bit of a hack. Is there a "correct" way?

Result without the hack

enter image description here

Result with hack

enter image description here

Alex Cooper
  • 475
  • 3
  • 7
  • 18
  • Can you add a link to a plunker or stackblitz demonstrating what is happening and possibly what you'd like to see? – JeffryHouser Mar 24 '22 at 20:54
  • @JeffryHouser - I'm just getting black screen from Stackblitz right now, but I've added images showing result with and without the hack – Alex Cooper Mar 24 '22 at 21:31
  • Why don't you use plain CSS and make the parent a flex container with flex-wrap set to wrap? Does that make any sense? – ionut-t Mar 24 '22 at 21:53
  • I bet if you put the ngFor on a div; or put a div inside the ngFor then you won't have a problem. Or put some CSS Margin on the anchor. – JeffryHouser Mar 25 '22 at 02:02

1 Answers1

1

The issue is that by default, Angular is removing the whitespace. To prevent that, add the preserveWhitespaces component decorator.

This Stackblitz shows the hack which is not needed with preserveWhitespaces.

Angular Reference

Alex Cooper
  • 475
  • 3
  • 7
  • 18