How do I escape characters in an Angular date pipe?

Question

I have an Angular date variable today that I'm using the date pipe on, like so:

{{today | date:'LLLL d'}}

February 13

However, I would like to make it appear like this:

13 days so far in February

When I try a naive approach to this, I get this result:

{{today | date:'d days so far in LLLL'}}

13 13PM201818 18o fPMr in February

This is because, for instance d refers to the day.

How can I escape these characters in an Angular date pipe? I tried \d and such, but the result did not change with the added backslashes.

Affrica

For anything more complex than angular.io/api/common/DatePipe you should use moment.js – Harelda

github.com/angular/angular/blob/master/packages/common/src/… These are all the values available. And how do you planned to work with 1st and 2nd days that way? – Harelda

@Harelda I've edited to a different example that doesn't depend on the 1st and 2nd days because I don't want that to distract from what I'm actually asking for. – Affrica

Have you tried square brackets? d [days so far in] LLLL – Afghanistan

@Afghanistan Doesn't work unfortunately: 13 [13PM201820 20o fPMr in] February – Affrica

Answer 1

How about this:

{{today | date:'d \'days so far in\' LLLL'}}

Anything inside single quotes is ignored. Just don't forget to escape them.

Polyptych

For me it works with double quotes. {{today | date:"d \'days so far in\' LLLL"}} – Legato

I successfully got a result like Feb 11 '21 at 16:28:47 (with a literal single quote) by using date: "MMM d '\'\yy 'at' H:mm:ss". – Kemerovo

Answer 2

This works for me:

{{today | date:"d 'days so far in' LLLL"}}

Member

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Swell

@Mark it's similar to accepted answer, just uses different quotes so there's no need for escaping it – Ordinal

@CarlosFagianiJr could you change variable name and date pattern so that it would match example in question? – Ordinal

it's not similar to accepted answer. because the accepted answer does not work for me. – Member

This is a fair well answer. Good Job Carlos – Vespertine

Answer 3

As far as I know this is not possible with the Angular date pipe at the time of this answer. One alternative is to use multiple date pipes like so:

{{today | date:'d'}} days so far in {{today | date:'LLLL'}}

EDIT:

After posting this I tried @Gh0sT 's solution and it worked, so I guess there is a way to use one date pipe.

Serna

Answer 4

Then only other alternative to stringing multiple pipes together as suggested by RichMcCluskey would be to create a custom pipe that calls through to momentjs format with the passed in date. Then you could use the same syntax including escape sequence that momentjs supports.

Something like this could work, it is not an exhaustive solution in that it does not deal with localization at all and there is no error handling code or tests.

import { Inject, Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'momentDate', pure: true })
export class MomentDatePipe implements PipeTransform {

    transform(value: any, pattern: string): string {
        if (!value)
            return '';
        return moment(value).format(pattern);
    }
}

And then the calling code:

{{today | momentDate:'d [days so far in] LLLL'}}

For all the format specifiers see the documentation for format.

Keep in mind you do have to import momentjs either as an import statement, have it imported in your cli config file, or reference the library from the root HTML page (like index.html).

Afghanistan

Answer 5

It's sometimes required to double escape the escaping ' character. E.g. when it is being passed as an input to a component or setting a property on an element.

@Component({
  selector: 'comment',
  template: `
    <tooltip 
      [message]="timeCreated | date: 'EEEE, MMMM d, y \\'at\\' HH:mm a'">
    </tooltip>
   `

or

@Component({
  selector: 'comment',
  template: `
    <tooltip 
      message="{{ timeCreated | date: 'EEEE, MMMM d, y \\'at\\' HH:mm a' }}">
    </tooltip>
   `

Baring