Angular date pipe 'YYYY' doesn't match 'full'

Fast fixed for the problem is that simply change YYYY to yyyy and everything is going to be OK. But note that based on official documentation the letter format for year is y not Y.

YYYY is Week-numbering year format (4 digits or more + zero padded) such as 0002, 0020, 0201, 2017, 20173.

<h3>{{ '2020-01-01' | date : 'full' }} | {{ '2020-01-01' | date : 'MMM yyyy'}}</h3>
<h3>{{ '2021-01-01' | date : 'full' }} | {{ '2021-01-01' | date : 'MMM yyyy'}}</h3>
<h3>{{ '2022-01-01' | date : 'full' }} | {{ '2022-01-01' | date : 'MMM yyyy'}}</h3>
<h3>{{ '2023-01-01' | date : 'full' }} | {{ '2023-01-01' | date : 'MMM yyyy'}}</h3>

And the result:

Wednesday, January 1, 2020 at 12:00:00 AM GMT+03:30 | Jan 2020
Friday, January 1, 2021 at 12:00:00 AM GMT+03:30 | Jan 2021
Saturday, January 1, 2022 at 12:00:00 AM GMT+03:30 | Jan 2022
Sunday, January 1, 2023 at 12:00:00 AM GMT+03:30 | Jan 2023

ForkedStackBliz

But better approach is to use the name of each format:

'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
'shortDate': equivalent to 'M/d/yy' (6/15/15).
'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
'shortTime': equivalent to 'h:mm a' (9:03 AM).
'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

You can use the build-in date like that:

demoDate.ts

export class AppComponent  {
  newDate = new Date();
}

demoDate.html

<h3>{{ newDate | date: 'MMMM yyyy'}}</h3>
<h3>{{ newDate | date: 'MM/yyyy'}}</h3>
<h3>{{ newDate | date: 'dd/MMMM/yyyy'}}</h3>
<h3>{{ newDate | date: 'dd/MM/yyyy'}}</h3>

Form more deep details you can visit https://angular.io/api/common/DatePipe

Here is the stackblitz example link Example Link

The issue is because you used Week-numbering year format YYYY.

The YYYY represents Week-numbering year, here i guess you don't need the Week-numbering year, so you can just use the yyyy.

format YYYY vs yyyy doc

Update

YYYY

to lower case will solve the issue.

yyyy

like:

{{ '2022-01-01' | date : 'MMM yyyy'}}

Week-numbering year also called ISO year informally