Working with Directives and Pipes Presentation. Part 2

ABOUT MYSELF
Front-end developer
2 years
Angular 1.x
C# - ASP.NET MVC 3
Last project – trading system (Angular 1, WebSockets, React, SASS, Gulp …).

What are Pipes on Angular 2
Use of Pipes
Build-in Pipes
Custom Pipes
Pure and Impure Pipes
Async Pipe
LESSON PLAN

Pipes allow us to change data inside of a template
JavaScript Angular2
WHAT ARE PIPES ON ANGULAR 2?

General syntax(template)
{{ expression | pipeName:parameter1:parameter2 }}
Chaining Pipes
USING PIPES

USING PIPES
Using in code

USING PIPES
Using in code

DatePipe
BUILT-IN PIPES

BUILT-IN PIPES
SlicePipe

BUILT-IN PIPES

UpperCasePipe
LowerCasePipe
BUILT-IN PIPES

CurrencyPipe
BUILT-IN PIPES
https://en.wikipedia.org/wiki/ISO_4217

DecimalPipe
BUILT-IN PIPES

JsonPipe
BUILT-IN PIPES

http://plnkr.co/edit/5AKKFMJXXJKYziWX7ODN?p=preview
CUSTOM PIPES
EXAMPLE

How to make the custom pipe available everywhere
CUSTOM PIPES

PURE AND IMPURE PIPES
Pure Pipes
Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
Pipes are pure by default.

Impure Pipes
Angular executes an impure pipe during every component change detection cycle. An impure pipe will be called a lot, as often as every keystroke or mouse-move.
PURE AND IMPURE PIPES

EXAMPLE
http://plnkr.co/edit/08HH8qArwZjOHqhGqXGK?p=preview
http://plnkr.co/edit/fJyipEbImeYypCFAPoiz?p=preview

ASYNC PIPE
EXAMPLE
http://plnkr.co/edit/9ICJ20kzzsHvwbrNS2Lk?p=preview

HTML SANITAZE PIPE

https://www.ng-book.com/2/
https://angular.io/docs/ts/latest/api/#!?apiFilter=pipe
https://angular.io/docs/ts/latest/guide/pipes.html
http://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2
USEFUL LINKS