Angular date pipe custom output

Question

If you take a look in Angular's DatePipe documentation you'll see at the pre-defined format options there's a 'long' format that looks like this: June 15, 2015 at 9:03:01 AM GMT+1

I want to achieve the same thing but without the timezone. Eg: 08 August at 16:06pm

Here's my code:
{{ clicked | date: 'dd MMMM HH:mma' | lowercase }} output: 08 August 16:06pm
But how can I insert the word at between the month and hour?

As a quick fix, I've managed to do it like this:

{{ clicked  | date: 'dd MMMM' }} at {{ clicked  | date: 'HH:mma' | lowercase }}

But is there a better solution without creating a new custom pipe?

Answer 1

Normally I do this:

{{ clicked | date: "dd MMMM 'at' HH:mma" | lowercase }}

This way with double quotes the word at inside single quotes is interpreted as a string

Answer 2

Easiest way to put your custom string inside your date format just like below,

{{ clicked | date: "format'at' format" | lowercase }}

output : date at time

this way you can achieve multiple formate as you want by adding multiple custom data.

{{ clicked | date: " date format 'on' EEEE 'at' format" | lowercase }}

// EEEE for Day Name

output : date on Day Name at time