Using a hyphen when field values are empty

Question

Using a hyphen when field values are empty

I've been working on a project using Angular. The code snippet in my HTML file looks like this:

      <div>{{ data.date | date:'d-MMM-y' || '-' }}</div>
       <div>{{ data.id  || '-' }}</div>

The issue I'm encountering is that when the value from the API for fields like date or id is null, the next div element shifts upwards. What I want is for the div to remain in its original position even if the value is null. To achieve this, I added || '-' to all the fields in my code, but it doesn't seem to be working as intended. The dash "-" should appear in the HTML when the API value is null, but it's not showing up. Can anyone guide me on how to fix this?

html css angular angular8 angular9

Answer 1

Answer №1

Almost there! Just a small tweak with the parentheses:

<div>{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}</div>

If you want to see it in action, check out this Stackblitz: https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts

Simply add a comment to the line

this.data["date"] = new Date();

and observe the difference.

Answer 2

Almost there! Just a small tweak with the parentheses:

<div>{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}</div>

If you want to see it in action, check out this Stackblitz: https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts

Simply add a comment to the line

this.data["date"] = new Date();

and observe the difference.

Answer 3

Answer №2

To tackle this scenario, you have the option to utilize the nullish coalescing operator.

Here is how it can be implemented:

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

Answer 4

To tackle this scenario, you have the option to utilize the nullish coalescing operator.

Here is how it can be implemented:

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

Using a hyphen when field values are empty

Answer №1

Answer №2

Similar questions

Is there a method in Bootstrap 4 to create a table row that can be clicked on?

Guide to automatically changing a background image according to different routes within a React framework

Apply this CSS style using JQuery

Is there a way to automatically assign a default value to radio buttons when the page is loaded?

Bootstrap gallery with images that resize proportionally

The Angular Library seems to be malfunctioning as it does not execute the ngOnInit

Tips for utilizing javascript to reset the heightline of the preceding keyword during a keyword search

Error: Unhandled Promise rejection in Angular 2 with C# API - ReferenceError: _body variable is not defined

The navigation for both the Bootstrap 4 Card Slider and Half Slider is identical

Is there a way to use JavaScript to determine our current position in a CSS Keyframe animation based on a percentage?

Struggling to style a nested table using CSS

Selenium Python can be used to save a web page as a

Angular component unable to locate specified DOM element during lazy loading

Angular Firebase Email Verification sent to an alternate email address

New button attribute incorporated in AJAX response automatically

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

The background image is not displaying correctly on mobile devices

Developing a calendar UI with similar features and functionality to Google Calendar using Ionic 2

A list containing various checkboxes

What is the technique for highlighting the exact data point on the XY am4chart when it is clicked?