Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Observables & RxJS Introduction


Published on

Introduction to the mystic concept of Streams, Observables & RxJS. Know how UI Event Handling, Forms & Http Service works in Angular.

Published in: Technology
  • Login to see the comments

Angular Observables & RxJS Introduction

  1. 1. Angular2 Angular - Observables & RxJS 1 ngMeetup - RedMart India
  2. 2. ngMeetup Angular2 Little about Myself 2 Rahat Khanna @mappmechanic Bangalore Front End Dev Blogger Author
  3. 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. 4. ngMeetup Angular2 Prior to this - Ajax 4
  5. 5. ngMeetup Angular2 Callbacks 5
  6. 6. ngMeetup Angular2 Promises 6
  7. 7. ngMeetup Angular2 Streams 7
  8. 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. 9. ngMeetup Angular2 Example 9 V/S
  10. 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. 11. ngMeetup Angular2 Observables Concept 11
  12. 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. 13. ngMeetup Angular2 Creating Observable in Angular 13
  14. 14. ngMeetup Angular2 Using in http Service in Angular 14
  15. 15. ngMeetup Angular2 UI Events in Angular 15
  16. 16. ngMeetup Angular2 Forms in Angular 16
  17. 17. Angular2 17 Thanks mAppMechanic 17 Sources