Angular2
Angular - Observables & RxJS
1
ngMeetup - RedMart India
ngMeetup Angular2
Little about Myself
2
Rahat Khanna
@mappmechanic
Bangalore
Front End Dev Blogger Authorblog.pusher.comairpair.compacktpub.com/blogpluralsight.org
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
ngMeetup Angular2
Prior to this - Ajax
4
ngMeetup Angular2
Callbacks
5
ngMeetup Angular2
Promises
6
ngMeetup Angular2
Streams
7
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.
ngMeetup Angular2
Example
9
V/S
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”.
ngMeetup Angular2
Observables Concept
11
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.
ngMeetup Angular2
Creating Observable in Angular
13
ngMeetup Angular2
Using in http Service in Angular
14
ngMeetup Angular2
UI Events in Angular
15
ngMeetup Angular2
Forms in Angular
16
Angular2 17
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
17
Sources https://dzone.com/refcardz/rxjs-streams https://auth0.com/blog/making-use-of-rxjs-angular/