Top 10 RxJs Operators in Angular

Jalpesh Vadgama
@jalpesh, Co-Founder, FutureStack Solution
Top 10 RxJs
Operators in Angular

About Me
• More than 14 years of experience in Web Development,
Cloud Solutions and Enterprise Grade Applications.
• Co-Founder of Future Stack Solution
http://www.futurestacksolution.com
• Awarded Microsoft MVP 8 times. Currently MVP in Visual
Studio and Development Technologies.
• A community guy love to network with new people!.
• An enthusiast developer trying to learn everyday
something new

Agenda
• What problems RxJs going to solve?
• Callback, Promises and What is the problem with that?
• Observables
• Demo with Observables and Of operator
• Different operators available in RxJs
• Questions and Answer

“To think creatively, we must be
able to look afresh at what we
normally take for granted”
- George Keller
Bringing functional
programming to
JavaScript

functionToCallXHR() {
function Success(successParams) {
// Handle success
}
function Failure(failureParams) {
// Handle failure
}
}

let result = http.get("your api url");
result.then(function(params){
},
function (params){
// Handle failure
}
);
// Handle success

What is I want to retry again
after failure?

What is Observables?
An observable is essentially a stream (a stream of events, or
data) and compared to a Promise, an Observable can be
cancelled..

What is Observables?
An observable have at least participant
The Creator
The Subscriber:
result.subscribe(){
next => {handleYourEmittedValue(next)},
console.error,
()=> console.log("All finished");
}
let result = http.get("your api url");

Operators
• Operators are functions that operate on observables and returns the
new observables
• They are pure functions that transform information in the observable
stream that create new observables, often based on the current
observable
• Most importantly, the operators in RxJS allow for complex
asynchronous code that can be easily composed in a declarative
manner.
.

Of operator
• Of operators convert any object into observables
• Mostly we are using it from to convert a JSON retrieve from our apis

Concat operator
• Concat operator emit the emissions from two or more Observables
without interleaving them
• You can think of concat like a line at a ATM, the next transaction
(subscription) cannot start until the previous completes!
// Simulate HTTP requests
const getPostOne$ = Rx.Observable.timer(3000).mapTo({ id: 1 });
const getPostTwo$ = Rx.Observable.timer(1000).mapTo({ id: 2 });
Rx.Observable.concat(getPostOne$, getPostTwo$)
.subscribe(res => console.log(res));

MergeMap operator
• The merge map operator is handy when the requirement is to
merge response from two observables
const firstNameObs$ = of('Jalpesh');
const lastNameObs$ = of('Vadgama');
const finalObs$ = firstNameObs$.pipe(
mergeMap(event1 => lastNameObs$.pipe(
map(event2 => event1 + ' ' + event2)))
);
const subscription = finalObs$.subscribe((value) => console.log(value));
// outputs: Jalpesh Vadgama

Filter operator
• The filter operator is handy when you need to filter something
• The following example will get an observable that emit the numbers.
We will use the filter operator to only emit the even numbers
this.numberService.getNumbers().pipe(
filter(n => n % 2 === 0),
)
.subscribe(result => console.log(result));

Delay operator
• The Delay operator emits values after some delay
const sub: Subject<number> = new Subject<number>();
sub.pipe(
delay(500)
).subscribe((val: number) => {
console.log(val);
});
sub.next(0);
sub.next(1);
sub.next(2);
// after 500ms delay will emit all the val

Retry operator
• if a source Observable emits an error, resubscribe to it in the hopes
that it will complete without error
getBook(id: number): Observable < Book > {
let url = this.bookUrl + "/" + id;
return this.http.get<Book>(url).pipe(
retry(3),
// retry the failed request up to 3 times
catchError(err => {
console.log(err);
return of(null);
})
);
}

Zip operator
• Multiple observables emitting at alternate intervals
const sourceOne = of('Hello');
const sourceTwo = of('World!');
const sourceThree = of('Goodbye');
const sourceFour = of('World!');
//wait until all observables have emitted a value
then emit all as an array
const example = zip(
sourceOne,
sourceTwo.pipe(delay(1000)),
sourceThree.pipe(delay(2000)),
sourceFour.pipe(delay(3000))
);
//output: ["Hello", "World!", "Goodbye", "World!"]

Distinct operator
• Returns an Observable that emits all items emitted by the source
Observable that are distinct by comparison from previous items.
of(1, 1, 2, 2, 2, 1, 2, 3, 4, 3, 2, 1).pipe(
distinct(),
)
.subscribe(x => console.log(x));
// Output: 1, 2, 3, 4

IsEmpty operator
• Emits false if the input observable emits any values, or emits true if the input
observable completes without emitting any values.
const source = new Subject<string>();
const result = source.pipe(isEmpty());
source.subscribe(x => console.log(x));
result.subscribe(x => console.log(x));
source.next('a');
source.next('b');
source.next('c');
source.complete();
// Results in:
// a
// false
// b
// c

10th Operator
• There are more than 50 operators are there.
• You can look at those operators at - https://rxjs-
dev.firebaseapp.com/api/operators/
• Even you can build your own operators!!

Thank you!
• Email: jalpesh@futurestacksolution.com
• Blog: https://www.dotnetjalps.com
• YouTube: http://bit.ly/codewithjv
• GitHub: https://github.com/jalpeshvadgama
• Twitter: @Jalpesh

Top 10 RxJs Operators in Angular

More Related Content

What's hot (20)

Similar to Top 10 RxJs Operators in Angular (20)

More from Jalpesh Vadgama (7)

Recently uploaded (20)

Top 10 RxJs Operators in Angular