Use Angular Basic pipes within components

Question

I am trying to use Angular readymade pipe (i.e. date, uppercase) in my Ionic project within a component, but it gives an error.

I have a component folder inside the src/app folder. The components are each in their own folder with scss, html, and ts files.

<div class="day">
  {{ day | date }}
</div>
<div class="month">
  {{ month | uppercase }}
</div>

Do I have to import the DateModule somewhere?

https://stackoverflow.com/a/41282812/495157 You may like this too. https://stackoverflow.com/questions/45330319/angular2-setting-date-field-on-reactive-form/45330707#45330707 — JGFMK, Feb 10 '19 at 08:32

score 1 · Accepted Answer · answered Feb 10 '19 at 11:53

There isn't any module named as DateModule.

The date pipe is part of the CommonModule (see @angular/common package).

The CommonModule exports are re-exported by BrowserModule, which is included automatically in the root AppModule (Also in Ionic projects).

score 0 · Answer 2 · answered Mar 04 '21 at 12:00

you can see pipes lise from below link : https://angular.io/guide/pipes

below are list of pipe name and usecase.

DatePipe: Formats a date value according to locale rules.

UpperCasePipe: Transforms text to all upper case.

LowerCasePipe: Transforms text to all lower case.

CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.

DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.

PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

2 Answers2