Downloaded 107 times
![Forms
Forms are observable
this.myForm = fb.group({
'sku': ['', Validators.required]
});
this.sku = this.myForm.controls['sku'];
this.sku.valueChanges.subscribe(
(value: string) => {
console.log('sku changed to: ', value);
}
);
this.myForm.valueChanges.subscribe(
(value: string) => {
console.log('form changed to: ', value);
}
);](https://image.slidesharecdn.com/angular-2-observables-160215084554/75/Angular-2-observables-37-2048.jpg)
Uploaded byGeoffrey Filippi
Angular 2 observables
This document provides an overview of Angular 2 and related reactive programming concepts: - It discusses fundamentals like reactive programming, functional reactive programming (FRP), and the observer design pattern. - Related concepts like promises, Object.observe, and RxJS observables are explained. - Angular 2 uses observables for forms, HTTP requests, the async pipe for change detection, and more. Pipes and change detection are also covered. - The document compares promises and observables, and how RxJS implements observables for use in Angular 2. Bridging between different async patterns and observables is discussed. - Questions are invited at the end regarding Angular 2 and related reactive
More Related Content
Similar to Angular 2 observables
Angular 2 observables
- 1. Angular 2 Observables, ChangeDetection, AsyncPipe, Forms, Rx.js /Geoff Filippi @geofffilippi
- 2.
- 3. Oildex A cloud servicecompany for oil and gas 1 year
- 4.
- 5. Experience Worked on streamingmedia (Voice over IP), 6 years 5 million phone customers
- 6. Experience Worked on videoand streaming video, 4 years
- 7. Projects twctv.com Video streaming website backbone.js Videostreaming Set-Top Box (STB) web application
- 8. Oildex Projects Rewrite 10+-year-oldapps Angular 1.4 New router ES5 No Angular 2, yet No ES6 or Typescript, yet
- 9. We will cover Fundamentals Relatedconcepts Angular 2
- 10. Fundamentals A brief overviewof reactive fundamentals Reactive programming Functional Reactive Programming (FRP) Observer design pattern
- 11. Related concepts Object.observe Promises Other Asyncconcepts RxJS
- 12. Observables in Angular2 Forms Http AsyncPipe
- 13.
- 14. Overview of ReactiveProgramming Data flows Propagation of change
- 15.
- 16. (FRP) Functional Reactive Programming ReactiveProgramming and Functional Programming
- 17.
- 18. Observer Design Pattern Subjecttracks observers Subject notifies observers of state changes
- 19.
- 20. Object.observe Not the sameas Observables Formerly a Stage 2 Proposal Proxy Proposal withdrawn
- 21. Criticisms of Object.observe Bigchanges to Object internals Bad performance Not well-supported or adopted But really, Ecosystem moved in different direction
- 22. Observable Stage 1 CurrentProposal Description Specification
- 23. Differences between Observables andObject.observe
- 24. Creating an Observable Thehard way let myObservable = new Observable(observer => { const token = doAsyncAction((err, value) => { if (err) } observer.error(err); } else { observer.next(value); observer.complete(); } }); return () => { cancelAsyncAction(token); }; {);
- 25.
- 26. Promises vs. Observables Promiseis like a async variable Observable is like a async array
- 27. Promises vs. Observables Promises Singlevalue Cannot be cancelled Not lazy Good for some AJAX calls Unless you want to cancel them Catch, Finally
- 28. Promises vs. Observables Observables Streams Canbe unsubscribed Lazy, until you call .subscribe() Better for events, WebSockets Animations, AJAX you want to cancel Can by retried Catch, Finally
- 29. Bridging Observables Easy wayto get an observable You can turn other async concepts into an observable using a helper Promises .from() Generator .from() Callbacks .fromCallback()
- 30. Bridging Observables Easy wayto get an observable Events .fromEvent() DOM AJAX WebSockets .fromWebSocket() Other observable implementations bacon.js kefir.js
- 31. Bridging Observables You caneven turn non-async concepts into an observable using a helper Arrays .of()
- 32. Working with Promisesvs. Observables .then()becomes .subscribe()
- 33. Working with Promisesvs. Observables Observables do not need to complete, but... If you need to do something when an observable completes, pass an optional complete handler
- 34.
- 35.
- 36.
- 37. Forms Forms are observable this.myForm= fb.group({ 'sku': ['', Validators.required] }); this.sku = this.myForm.controls['sku']; this.sku.valueChanges.subscribe( (value: string) => { console.log('sku changed to: ', value); } ); this.myForm.valueChanges.subscribe( (value: string) => { console.log('form changed to: ', value); } );
- 38. Http Cancel requests Stream results "typeahead" Returns observable
- 39. Http getRandomQuote() { this.http.get('http://localhost:3001/api/random-quote') .retry(3) .map(res =>res.text()) .subscribe( data => this.randomQuote = data, err => this.logError(err), () => console.log('Random Quote Complete') ); }
- 40. Pipes Like Angular 1filter
- 41. AsyncPipe Can subscribe toobservables timerAsync = Observable.interval(1000).startWith(0); <h2>Current Total (Async Pipe): {{timerAsync | async}}</h2>
- 42. Change Detection New inAngular 2: Apps are reactive Change detection is directional You can skip walking parts of the tree Immutable objects Observables
- 43. ngrx Reactive Extensions forAngular 2 ngrx/store Can be used to implement elm/redux-style applications in Angular 2
- 44.