Chapter 5. Bindings, observables, and pipes

This chapter covers

Working with flavors of data binding
Binding to attributes vs. properties
Understanding observable data streams
Treating events as observable data streams
Minimizing network load by canceling unwanted HTTP requests
Minimizing manual coding with pipes

The goal of the first four chapters of this book was to jump-start application development with Angular. In those chapters, we discussed how to use property bindings, handle events, and apply directives without providing detailed explanations. In this chapter, we want to take a breather and cover some of these techniques in more detail. You’ll continue writing code in TypeScript, and you’ll see an example of using destructuring syntax while handing events.

5.1. Data binding

Data binding allows you to connect the data from your application with the UI. The data-binding syntax lowers the amount of manual coding. Chapter 2 briefly introduced the data-binding syntax, and you used it in almost every example in the previous chapters. In particular, you’ve seen the following cases:

<h1>Hello {{ name }}!</h1>                                             #1
<span [hidden]="isValid">This field is required</span>                 #2
<button (click)="placeBid()">Place Bid</button>                        #3
#1 - Displays a value or an expression as a string in a template
#2 - Uses square brackets to bind an HTML element’s properties
#3 - Binds to events with parentheses

Chapter 5. Bindings, observables, and pipes

This chapter covers

5.1. Data binding

5.2. Reactive programming and observables

5.3. Pipes

5.4. Hands-on: filtering products in the online auction

5.5. Summary