10 important RxJs Angular Interview Questions & Answers
- 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?
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 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.
Stream in RxJs is asynchronous data emitted from observables.
"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); }
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();
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); }
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));
|Observable return stream of data.||Promise return single value.|
|You can subscribe and unsubscribe stream.||You cannot cancel a promise.|
npm install rxjs
Imperative programming means listener code is responsible to pull stream of data. Reactive programming means you register a callback and the stream is responsible to push data. Some devs also visualize it as publisher and subscriber model as well.
- 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.