You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them.
Note: Learn more about formatting data with pipes in the in-depth guide.
In this activity, you will work with some pipes and pipe parameters.
To pass parameters to a pipe, use the : syntax followed by the parameter value. Here's an example:
template: `{{ date | date:'medium' }}`;
The output is Jun 15, 2015, 9:43:11 PM.
Time to customize some pipe output:
-
Format a number with
DecimalPipeIn
app.ts, update the template to include parameter for thedecimalpipe.template: ` ... <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>`NOTE: What's that format? The parameter for the
DecimalPipeis calleddigitsInfo, this parameter uses the format:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} -
Format a date with
DatePipeNow, update the template to use the
datepipe.template: ` ... <li>Date with "date" {{ birthday | date: 'medium' }}</li>`For extra fun, try some different parameters for
date. More information can be found in the Angular docs. -
Format a currency with
CurrencyPipeFor your last task, update the template to use the
currencypipe.template: ` ... <li>Currency with "currency" {{ cost | currency }}</li>`You can also try different parameters for
currency. More information can be found in the Angular docs.
Great work with pipes. You've made some great progress so far.
There are even more built-in pipes that you can use in your applications. You can find the list in the Angular documentation.
In the case that the built-in pipes don't cover your needs, you can also create a custom pipe. Check out the next lesson to find out more.