Professional Documents
Culture Documents
06062017210141
06062017210141
Produced by
• What are Pipes?
• Getting Started with Pipes
• Demo: Setting Up the Angular Starter Application
• Using Pipes
• Demo: Making a String Uppercase & Lowercase
• Passing Arguments to Pipes
• Demo: Displaying Numbers, Dates & Currency
• Using Variables with Pipes
• Demo: Add Pagination to a Table
• Debugging with Pipes
• Demo: Using the JSON Pipe
• Creating Custom Pipes
• Demo: Creating a Custom Capitalize Pipe
• Pipes and Performance
• Demo: Observing When Pipes Run
• Pipes are used to transform data
• Pipes can transform data in many ways
• Formatting for Internationalization and Localization
• Data Manipulation
• Filter and Sort Data
• Outputting Template Data for Debugging
• In Angular 1, pipes were called filters
• Angular comes with many built-in pipes for transforming strings, dates,
currency, numbers, arrays, and conversion of data to JSON
• In addition to built-in pipes, Angular provides the ability to create
custom pipes
• Custom pipes are defined as classes, and included in the application's
module as a declaration
• The custom pipe can then be used in the template like any other pipe,
built-in or custom
• Pipes can be used alone, or chained together with other pipes
• In addition to the value being transformed, pipes can accept parameters
• Parameters are separated by colons
The uppercase pipe is built-in, and it simply takes the text and
makes it uppercase. There is a lowercase pipe as well. When
message changes, the pipe will be reapplied and the updated
value of message will be displayed
Demo
Making a String Uppercase & Lowercase
• Many pipes accept one or more arguments which will customize their
behavior
• Many built-in pipes accept parameters for formatting numbers, dates
and currency
• Arguments are specified in the template and are separated by colons
• Decimal pipe is named number in the template
• The pipe configures the minimum number of integers to be displayed
• Additionally, it configures the minimum and maximum number of
fractional digits to be displayed
• DatePipe transforms the given date object into the desired format
• {{ someDate | date }} -> Oct 10, 2016
• {{ someDate | date:'medium' }} -> Oct 10, 2016, 3:43:12 PM
• {{ someDate | date:'HHmmss' }} -> 15:43:12
• Localization is taken into account for formatting dates and times
• The specific formats above such as 'medium', 'short', 'fullDate' are based
upon the 'en-US' localization setting
• Formats numbers according to the localization or desired currency
formatting
• {{ someNumber | currency }} -> USD10.45
• {{ someNumber | currency:'USD':true }} ->$10.45
• {{ someNumber | currency:'USD':true:'4.2-2' }} -> $0,010.45
• {{ someNumber | currency:'EUR':true }} -> €10.45
Demo
Displaying Numbers, Dates & Currency
• In addition to static values being passed as arguments to pipes,
component instance data properties and template reference variable
can be passed to pipes as well
• When these variables have their values updated, the result of the pipe
transformation can be updated in the user interface
• A good example is pagination, as the page number changes the items
displayed changes
• The slice pipe can be used to display parts of a data set based upon
page number
• The slice pipe slice off array elements just like the slice array function
• {{ [1,2,3,4,5] | slice:1 }} -> 2,3,4,5
• The first parameter is the starting index, the second parameter is the
ending index (the ending index is not included in the output)
• Useful for selecting portions of an array such as when doing pagination
• Can be used with strings as well
Demo
Add Pagination to a Table
Debugging with Pipes
{{ someObj | json }}