How to use an Angular pipe with complex parameters from the HTML template?

Issue

I'm making an internationalized Angular application, so I implemented the MatLuxonDateModule for my MatDatepickers and it works fine. But I also want to use a Luxon pipe whenever I format a date instead of the built-in date pipe so it works consistently in all browsers and cultures.

I made one that works fine:

import { Pipe, PipeTransform } from '@angular/core';
import { DateTime, DateTimeFormatOptions } from 'luxon';

@Pipe({
  name: 'dateFormat',
})
export class LuxonDatePipe implements PipeTransform {
  transform(value: DateTime | Date, format: DateTimeFormatOptions = DateTime.DATE_SHORT): any {
    let dateTimeToUse: DateTime;
    if (value instanceof Date) {
      dateTimeToUse = DateTime.fromJSDate(value);
    } else {
      dateTimeToUse = value;
    }

    return dateTimeToUse.toLocaleString(format);
  }
}

Now I want to use it in the HTML template, like this:

{{ testDate | dateFormat: DateTime.DATE_MED_WITH_WEEKDAY }}

...but it doesn't know what "DateTime" is. I can solve this by changing it to:

{{ testDate | dateFormat: formatToUse }}

...but then I have to declare a property like this in the .ts file every time I need to format a date:

  formatToUse: DateTimeFormatOptions = DateTime.DATE_MED_WITH_WEEKDAY;

This is really cumbersome. Is there a way to "import" Luxon in the template so I can reference DateTime on-the-fly?

Edit: I suppose I could change the param to a string and add a huge switch case to the pipe to map to the Luxon formats, but that seems less than ideal.

Solution

Try this:

change your pipe:

export class LuxonDatePipe implements PipeTransform {
  transform(value: DateTime | Date, format: string = 'DATE_SHORT'): any {
    let dateTimeToUse: DateTime;
    if (value instanceof Date) {
      dateTimeToUse = DateTime.fromJSDate(value);
    } else {
      dateTimeToUse = value;
    }

    return dateTimeToUse.toLocaleString((<any>DateTime)[format]);
  }
}

and use your pipe like this:

{{ testDate | dateFormat: 'DATE_MED_WITH_WEEKDAY' }}

Answered By - Juan Vicente Berzosa Tejero