Header

Microsoft Virtual Academy

Mastering Angular, Part 2

Pipes
Eric W. Greene

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

{{ arrayOfNums | slice:2 | json }} <– chained and with parameters

• Angular applications require some initial project configuration to get up
and running
• There are many ways to get started
• Angular CLI
• Numerous Starter Projects
• From Scratch
• This course will use a starter project configured with WebPack 2
• The WebPack development server will serve the web pages, and
WebPack will bundle the application files
• The initial starter project can be downloaded from GitHub
• Git is not required, simply fire up a web browser, and visit the following
link
• https://github.com/training4developers/mastering-angular-starter
• In the demonstration we will download, configure and fire up the project
Demo
Setting Up the Angular Starter Application
• Built-in pipes can be used with no additional configuration
• Simply, apply the the pipe using the pipe syntax inside a template
expression

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

• Template reference variables allow template to directly access the

element's DOM object or the instance of a directive applied to the
element
• Template reference variables do not exist on the component instance;
therefore, they hard to debug within the context of the component
implementation
• JSON pipes can be used to transform the template reference variable
object to JSON and easily outputted to the user interface
Debugging with Pipes

• Elements can be assigned template reference variables which

allow direct access to the underlying DOM element
<span #msg>Some Text</span>
<span ref-msg>Some Text</span>
• Either the hash tag or the "ref-" attribute prefix can be used to
assign the reference to the DOM element
• The msg variable can be used directly in the template
<span>{{msg.innerText}}</span>
• Directly referencing the DOM element is typically not
recommended
Debugging with Pipes

• Transforms the value or object passed to it into JSON

{{ someObj | json }}

• Consider the following template reference:

<span #msg>Some Text</span>

• The JSON pipe can be used to see the contents of msg

{{ msg | json }}
Demo
Using the JSON Pipe
• Pipes are nothing more than a class decorated with the Pipe decorator
• The decorator configuration provides a name option for specifying the
name of the pipe to be used in the template
• All pipe classes must have a transform function, and optionally
implement the PipeTransform interface
• The first parameter of the class's transform is the value specified to the
left of the pipe operator
• The second and remaining parameters correspond to the values
following the colons in the template syntax
Demo
Creating a Custom Capitalize Pipe
• While pipes are great for transforming data, the act of transforming
blocks the web browser from updating the user interface (as all
JavaScript tasks do)
• Therefore, the pipe needs to run only when the input value changes, and
when it does run, its need to run fast
• Angular Pipes support a concept known as pure and impure pipes
• Pure pipes execute when the input value changes
• Impure pipes execute on every change detection cycle
• Configuring pure vs. impure is beyond the scope of this course and will
be covered later
Demo
Observing When Pipes Run
• In this course, a simple Angular Pipes were explored
• Pipes transform data
• Angular comes with built-in pipes and it provides an API for creating
custom pipes
• The built-in pipes provide formatting for strings, numbers, dates and
currency
• There is a built-in pipe for slice out sections of arrays
• The JSON pipe is useful for debugging
• Pipes can cause performance issues, and must used with care