angular observables & rxjs introduction

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

yehtechnologies@gmail.com

17

Sources https://dzone.com/refcardz/rxjs-streams https://auth0.com/blog/making-use-of-rxjs-angular/