Dealing with null values in angular (9) ngFor

1
votes

I have a table being populated by an ngFor.

I'm using something like:

{{ (item.attribute || "--" }}

to deal with null values and thats working fine however i have a field that displays a multiple so i add an "x" into it:

{{ (item.attribute + "x") || "--" }}

obviously the "x" is giving it a value hence even if the attribute is null the html is displaying an 'x' instead of my preferred '--'.

im thinking i need to maybe use ngIf but i cant get any implementation working. Anyone able to point me in the right direction?

Thanks in advance.

3
angularngfor

3 Answers

2
votes

You can use a Javascript ternary operator here to emit different values based on a logical condition.

{{item.attribute ? item.attribute + "x" : '--'}}

DEMO: https://stackblitz.com/edit/angular-u8ly3l

2
votes

You can use a ternary operator in your template:\

{{ item.attribute ? item.attribue + "x" : "--" }}

This will check if item.attribute is truthy and if so, it will return item.attribute concatenated with "x".

2
votes

try this

You can use Conditional (ternary) operator, inside of template like below example

{{ item.attribute? (item.attribute + "x"): "--" }}