coderain blog

AngularJS: How to Set Default Value for Template Binding When Null/Undefined (With Date Filter)

In AngularJS, template binding using double curly braces {{ }} is a fundamental way to display dynamic data. However, when the bound value is null, undefined, or invalid (e.g., an empty date), the UI may render empty spaces, null, or even errors—creating a poor user experience. This is especially common with date values, where missing or invalid data can break the date filter.

In this blog, we’ll explore how to set default values for template bindings when data is missing, with a special focus on handling dates. We’ll cover simple ternary checks, reusable custom filters, edge cases, and best practices to ensure your AngularJS app remains robust and user-friendly.

2025-12

Table of Contents#

  1. Understanding AngularJS Template Binding
  2. Setting Default Values Without Filters
  3. Setting Default Values with the Date Filter
  4. Handling Edge Cases
  5. Best Practices
  6. Conclusion
  7. References

1. Understanding AngularJS Template Binding#

AngularJS interpolation ({{ expression }}) evaluates the expression and renders the result in the DOM. For example:

<!-- Displays "John Doe" if user.name is defined -->
<p>Name: {{ user.name }}</p>

The Problem with Null/Undefined Values#

If user.name is null or undefined, the binding will render an empty string (or null/undefined in older AngularJS versions), leaving a blank space. For dates, using the date filter on null/undefined values is even worse:

<!-- Renders empty string if user.birthdate is null/undefined -->
<p>Birthdate: {{ user.birthdate | date:'medium' }}</p>

This results in a broken UI. We need a way to display a default value (e.g., "N/A", "Not provided") when data is missing.

2. Setting Default Values Without Filters#

For simple bindings (no filters), the easiest solution is to use the logical OR (||) operator or a ternary conditional to check for null/undefined and return a default.

Using the OR Operator (||)#

The || operator returns the first truthy value. If the bound value is null/undefined (falsy), it falls back to the default:

<!-- Displays "Guest" if user.name is null/undefined -->
<p>Name: {{ user.name || 'Guest' }}</p>

Note: This works for null/undefined, but be cautious with other falsy values like 0, "" (empty string), or false—the OR operator will replace them with the default, which may not be desired.

Using Ternary Conditional#

For stricter checks (e.g., only replace null/undefined, not other falsy values), use a ternary operator:

<!-- Only replaces null/undefined with "N/A" -->
<p>Age: {{ user.age === null || user.age === undefined ? 'N/A' : user.age }}</p>

This ensures 0 (a valid age) is displayed instead of "N/A".

3. Setting Default Values with the Date Filter#

Dates are trickier because the AngularJS date filter throws errors or returns empty strings for null/undefined values. Let’s tackle this with ternary checks and custom filters.

3.1 Using Ternary Operator with Date Filter#

The ternary operator can first check if the date is valid, then apply the date filter; otherwise, return a default:

<!-- If birthdate exists, format it; else show "N/A" -->
<p>Birthdate: {{ user.birthdate ? (user.birthdate | date:'medium') : 'N/A' }}</p>

How It Works:#

  • user.birthdate ? ... checks if birthdate is truthy (not null/undefined).
  • If true: (user.birthdate | date:'medium') applies the date filter with the 'medium' format (e.g., "Oct 5, 2023, 1:45:30 PM").
  • If false: Renders "N/A".

3.2 Creating a Reusable Custom Filter#

For apps with many date fields, repeating the ternary logic in templates is messy. Instead, create a custom filter (e.g., defaultIfNull) to wrap the date filter and handle defaults.

Step 1: Define the Custom Filter#

This filter will:

  • Check if the input is null/undefined.
  • Apply the date filter if valid.
  • Return a default value for invalid/missing dates.
angular.module('myApp')
  .filter('defaultIfNull', ['$filter', function($filter) {
    return function(value, defaultValue, dateFormat) {
      // Handle null/undefined
      if (value === null || value === undefined) {
        return defaultValue;
      }
 
      // Apply date filter if format is provided
      if (dateFormat) {
        const formattedDate = $filter('date')(value, dateFormat);
        // Handle invalid dates (AngularJS date filter returns "Invalid Date")
        if (formattedDate === 'Invalid Date') {
          return defaultValue;
        }
        return formattedDate;
      }
 
      // No date format? Return the raw value
      return value;
    };
  }]);

Step 2: Use the Filter in Templates#

Now use defaultIfNull in templates to handle dates (and other values) with defaults:

<!-- Basic usage: Date with default -->
<p>Birthdate: {{ user.birthdate | defaultIfNull:'N/A':'medium' }}</p>
 
<!-- Handles invalid dates (e.g., "invalid-date-string") -->
<p>Join Date: {{ user.invalidDate | defaultIfNull:'Invalid Date':'short' }}</p>
 
<!-- Non-date values: Use without dateFormat -->
<p>Address: {{ user.address | defaultIfNull:'Not provided' }}</p>

How It Works:#

  • user.birthdate | defaultIfNull:'N/A':'medium': Checks if birthdate is null/undefined → returns "N/A". If valid, applies date:'medium'.
  • For invalid dates (e.g., 'invalid-date-string'), the date filter returns "Invalid Date", which the custom filter replaces with "N/A".

4. Handling Edge Cases#

Invalid Date Strings#

If the date is a string like '2023-13-05' (invalid month), the date filter returns "Invalid Date". The defaultIfNull filter already handles this by checking for "Invalid Date" and returning the default.

Epoch Dates (0 Timestamp)#

The timestamp 0 is a valid date (January 1, 1970). To avoid replacing it with a default, ensure your checks only target null/undefined:

<!-- 0 is a valid date (epoch), so it will render "Jan 1, 1970" -->
<p>Start Date: {{ 0 | defaultIfNull:'N/A':'medium' }}</p>

Empty Strings#

If your API returns empty strings ("") for missing dates, update the custom filter to treat "" as null:

// Add to the custom filter's null check:
if (value === null || value === undefined || value === '') {
  return defaultValue;
}

5. Best Practices#

  1. Prefer Ternary for Simple Cases: For one-off date bindings, the ternary operator ({{ date ? (date | date) : 'N/A' }}) is clearer than a custom filter.

  2. Use Custom Filters for Reusability: If you need defaults for dates across your app, a defaultIfNull filter reduces repetition.

  3. Avoid Overcomplicating Templates: Keep logic in filters/controllers, not templates. Use ng-bind instead of {{ }} to prevent "flicker" (unrendered {{ }} before AngularJS loads):

    <p ng-bind="user.birthdate | defaultIfNull:'N/A':'medium'"></p>

  4. Validate Data in Controllers/Services: Preprocess API responses to replace null dates with 'N/A' in controllers, reducing template logic:

    // In your controller
$scope.user.birthdate = userData.birthdate || 'N/A';

  5. Test Edge Cases: Ensure your filters handle null, undefined, invalid dates, and empty strings.

Conclusion#

Setting default values for AngularJS template bindings ensures a polished user experience by replacing null/undefined with user-friendly text like "N/A". For simple cases, use ternary operators or the OR operator. For dates, wrap the date filter in a ternary check or create a reusable defaultIfNull filter to handle nulls, invalid dates, and edge cases.

By following these patterns, you’ll keep your templates clean and your app robust.

References#