Angular: Render null value in table cell

Question

How can I force my view to render null values into the template as a blank space?

<table>
  <tr *ngFor="let key of keys">
    <!-- may evaluate to null but I want the row anyway -->
    <td>{{ foo[key]}}</td>
  </tr>
</table>

Martin Parenteau · Accepted Answer · 2017-12-30 01:34:41Z

1

The null value is output as empty content, which collapses the cell. The same thing happens if the cell contains only space characters. To get a non-collapsed cell, you can insert an unbreakable space in it when the value is null:

<td>{{ foo[key] || "&nbsp;" }}</td>

See this stackblitz.

edited Dec 30, 2017 at 1:34

answered Dec 29, 2017 at 22:19

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

Steve Danner · Accepted Answer · 2017-12-29 21:16:10Z

0

Straight-forward solution for this that I've used many times:

<td>{{ (foo[key] || '') }}</td>

answered Dec 29, 2017 at 21:16

Steve Danner

22.2k7 gold badges45 silver badges54 bronze badges

1 Comment

Jeremy Thomas Over a year ago

I believe this renders nothing, not an empty td

Collectives™ on Stack Overflow

Angular: Render null value in table cell

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related