Upcoming SlideShare
Angular Observables & RxJS Introduction
- 1. Angular2 Angular - Observables & RxJS 1 ngMeetup - RedMart India
- 2. ngMeetup Angular2 Little about Myself 2 Rahat Khanna @mappmechanic Bangalore Front End Dev Blogger Author blog.pusher.com airpair.com packtpub.com/blog pluralsight.org
- 3. ngMeetup Angular2 Agenda 3 • A new asynchronous programming concept: the stream • A new primitive type: Observables • Intro to RxJs in Angular • Commonly used operators: map, filter, reduce, scan • Common uses of RxJs in Angular: Forms and Http
- 4. ngMeetup Angular2 Prior to this - Ajax 4
- 5. ngMeetup Angular2 Callbacks 5
- 6. ngMeetup Angular2 Promises 6
- 7. ngMeetup Angular2 Streams 7
- 8. ngMeetup Angular2 Streams 8 Stream is simply - sequence of events over a given time. Streams can be used to process any of type of event such as • mouse clicks, • key presses, • bits of network data, etc. You can think of streams as variables that with the ability to react to changes emitted from the data they point to.
- 9. ngMeetup Angular2 Example 9 V/S
- 10. ngMeetup Angular2 New Primitive Type - Observables 10 An observer subscribes to an Observable. An Observable emits items or sends notifications to its observers by calling the observers’ methods. In other documents and other contexts, what we are calling an “observer” is sometimes called a “subscriber,” “watcher,” or “reactor.” This model in general is often referred to as the “reactor pattern”.
- 11. ngMeetup Angular2 Observables Concept 11
- 12. ngMeetup Angular2 Intro to RxJS 12 Reactive Extensions for JavaScript RxJS is a library that allows us to easily create and manipulate streams of events and data. This makes developing complex but readable asynchronous code much easier. RxJS in Angular To get started with RxJS in Angular, all we need to do is import the operators we want to use. TRxJS is itself an Angular dependency so it's ready to use out of the box.
- 13. ngMeetup Angular2 Creating Observable in Angular 13
- 14. ngMeetup Angular2 Using in http Service in Angular 14
- 15. ngMeetup Angular2 UI Events in Angular 15
- 16. ngMeetup Angular2 Forms in Angular 16
- 17. Angular2 17 Thanks mAppMechanic twitter.com/mAppMechanic linkedin.com/in/rahatkh yehtechnologies@gmail.com 17 Sources https://dzone.com/refcardz/rxjs-streams https://auth0.com/blog/making-use-of-rxjs-angular/
Login to see the comments