Back To Blog

10 important RxJs Angular Interview Questions & Answers

By Shiv Prasad Koirala in Angular
Nov 24th, 2020
18035
0

Introduction
What is RxJs and why do we need it ?
What are observables and observers?
What is stream in RxJs?
What is the use of subscribe in RxJs?
How to unsubscribe from the stream?
What are operators in RxJs?
Where did you use RxJs in Angular?
Differentiate between RxJs and Promises?
How to install rxJs?
Why is rxjs called Push/Reactive not pull/imperative?
Name some rxJs Operators?

Introduction

When it comes to Angular interviews one of the most asked questions is around Rxjs. RxJs even though very simple when it comes to expressing answers and explanation it has its own challenges. This article will cover 10 important questions around rxJs which will help you fly in your Angular interviews. Happy learning and Happy job hunting.

You can also go through my Rxjs interview questions with answers video which run through 11 important Rxjs interviews.

What is RxJs and why do we need it ?

RxJs stands for Reactive extensions for JavaScript. RxJs helps to handle asynchronous data stream with ease.

RxJs stands for Reactive extensions for JavaScript. RxJs helps to handle asynchronous data stream with ease. Assume you have an entity which is streaming async data, now this entity which is streaming async data can be a HTTP response , Port which is streaming data , Timer emitting data and so on. This Async stream is coming in undecided intervals like stream of data. As a developer you would like to listen to this stream , run some logic on these stream and so on.RxJs makes this task easy.

What are observables and observers?

What are observables and observers? RxJs library helps to handle async data stream easily. But in order to access the async stream it has to be exposed as a rxJs Observable object. The listener who is interested in accessing the Observable stream is exposed as an observer.

In simple word observable represents async stream of data and observer subscribes to the observable to receive the stream.

What is stream in RxJs?

Stream in RxJs is asynchronous data emitted from observables.

What is the use of subscribe in RxJs?

"Subscribe" function starts the stream from observable to the observer function. You can see in the below code how the subscribe function takes a function as reference. So when data is streamed from Observable its received by the Listener function.

var observ = Observable.create(AsyncStream);
observ.subscribe(res=>Listener(res));
function Listener(res)
    console.log(res);
}

How to unsubscribe from the stream?

We need to get reference of the "subscription" object. This subscription object is returned when we call the "subscribe" function. To unsubscribe we can call "unsubscribe" on the "sunscription" object.

var subscription = observ.subscribe(res=>Listener(res));
subscription.unsubscribe();

What are operators in RxJs?

Operators are logics which manipulate an observable stream and create new observable streams.

For example you can have a stream which emits decimal numbers.

You can then apply a Map operator and round the stream, which generates a new stream without decimals.

You can again apply filter operator on the stream and say give values which are only greater than 3.

Below is how the source code looks like. We have stream1 on which rounding operator is applied and stream2 is created and filter applied to create stream3.

var stream1 = Observable.create(AsyncStream);
var stream2 = stream1.pipe(map(x=>Math.round(x)));
var stream3 = stream2.pipe(filter(x=>x>3));
stream3.subscribe(res=>Listener(res));
function Listener(res)
    console.log(res);
    
}

Where did you use RxJs in Angular?

Most of the times rxJs is used in http calls with angular. As http streams asynchronous data we can subscribe , apply filters to the http streams.

Below is a simple sample code of how RxJs can be used with HTTP calls.

var  stream1 = httpc.get("https://www.myapi.com/somedata");
 var stream2 = stream1.pipe(filter(x=>x>3));
 stream2.subscribe(res=>this.Success(res),res=>this.Error(res));

Differentiate between RxJs and Promises?

RxJs	Promise
Observable return stream of data.	Promise return single value.
You can subscribe and unsubscribe stream.	You cannot cancel a promise.

Map :- Transforms data in a observable in to a different format.
Filter :- Allows data which meets conditions.
Merge :- This operator will combine multiple Observables into one. So if one of the observables emit a value the combined one will emit as well.
Concat :- only when observable completes, it will start with the next observable.
From :- This operator will turn array, promise or iterable into an observable.
debouncetime :- discard emitted values if a certain time didn't pass between the last input
distinctuntilchanged :- only emits a value if it is different than the last one.
pluck :- select a property to emit.
delay :- emits a value with a delay.