Secure string output and preserve spaces

Issue

In Angular, I use the string output method

<div>{{stringWithValue}}</div>

But if my string contains only a whitespace or nothing, the value is not rendered. As a solution, I can use the following:

 

for plain html. Now I prepare the following code in https://stackblitz.com/edit/angular-ivy-ra8pe4

<div>{{stringWithValue}}</div>
<div>{{stringEmpty}}</div>
<div>{{stringWithValue}}</div>
<div>&nbsp;</div>
<div>{{stringWithValue}}</div>

StringEmpty returns a space and I try to use special character reserved space automatically to prevent my layout.

Is there a common approach?

Solution

I found a good solution based on your comments about CSS:

div:empty::before {
  content: "\200b"; /* unicode zero width space character */
}

For pure whitespace output, there is a problem, but this does not affect my application.

Answered By - Mario