Having a dash if field values are null

Question

I am working on an angular application. I have following code in my html

      {{ data.date | date:'d-MMM-y' || '-' }}
       {{ data.id  || '-' }}

The problem I am facing is, whenever for any field like date and id, if value coming from API is null then next div shifts upward. I want div to be in that particular place it is when value is not null. So, I want to have a dash "-" whenever a value coming from API is null. So in my code I added a || '-' to all the fields but still it is not working. I am not getting "-" in my html. How can I do that?

user_9890873 · Answer

You were close to the result, you are just missing some parentheses:

{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}

Working Stackblitz: https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts

Just comment the line this.data["date"] = new Date(); and you will see how it changes.

user_13665438 · Answer

You can use on this case the nullish coalescing operator

it will be like:

   {{ (data.date | date:'d-MMM-y') ?? '-' }} 
   {{ data.id ?? '-' }}

Having a dash if field values are null

2 Answers