Скачать или смотреть Angular #44 - Custom Pipe in Angular (How to create custom pipe & how we can use in our components)

Click to watch Angular Playlist:    • Angular  

Transforming Data Using Pipes

Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.

The following are commonly used built-in pipes for data formatting:

DatePipe: Formats a date value according to locale rules.
UpperCasePipe: Transforms text to all upper case.
LowerCasePipe : Transforms text to in lower case
TitleCasePipe : Transforms text to title 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.

Sample User's Array of Object to test this practical. You can use this User's Array to complete the practical. Please copy the below User's Array and use it as same as it is, i done in this tutorial.

[
{
"address": {
"geolocation": {
"lat": "-37.3159",
"long": "81.1496"
},
"city": "kilcoole",
"street": "new road",
"number": 7682,
"zipcode": "12926-3874"
},
"id": 1,
"email": "[email protected]",
"username": "johnd",
"password": "m38rmF$",
"name": {
"firstname": "john",
"lastname": "doe"
},
"phone": "1-570-236-7033",
"__v": 0
},
{
"address": {
"geolocation": {
"lat": "-37.3159",
"long": "81.1496"
},
"city": "kilcoole",
"street": "Lovers Ln",
"number": 7267,
"zipcode": "12926-3874"
},
"id": 2,
"email": "[email protected]",
"username": "mor_2314",
"password": "83r5^_",
"name": {
"firstname": "david",
"lastname": "morrison"
},
"phone": "1-570-236-7033",
"__v": 0
},
{
"address": {
"geolocation": {
"lat": "40.3467",
"long": "-30.1310"
},
"city": "Cullman",
"street": "Frances Ct",
"number": 86,
"zipcode": "29567-1452"
},
"id": 3,
"email": "[email protected]",
"username": "kevinryan",
"password": "kev02937@",
"name": {
"firstname": "kevin",
"lastname": "ryan"
},
"phone": "1-567-094-1345",
"__v": 0
}
]