Top RxJS Interview Questions (2021) | CodeUsingJava
















Most frequently asked RxJS Interview Questions


  1. What is RxJS?
  2. What is Stream in RxJS?
  3. What is Observable?
  4. What is the benefits of RxJS Observables on promises?
  5. What is the difference between Cold and Hot Observables?
  6. What is the difference between React and RxJS?
  7. What are RxJS Operators?
  8. What are observers?
  9. What are the advantages of Observable over Promise?
  10. What is Subscriptions?
  11. What is Subject?
  12. What does a subject do in RxJS?
  13. What is RxJS concatMap?
  14. What are switchMap, mergeMap and concatMap?
  15. What is the use of mergeMap?
  16. What is the Reactive Manifesto?
  17. What is Angular Material?
  18. What are the key features of Angular?
  19. How can we get current value of RxJS Subject or Observable?
  20. How can we close a dropdown on click outside?
  21. What is AOT Compilation?


What is RxJS?

RxJS is a library for reactive Streams which can be used to deal with asynchronous data streams and events called "Reactive Extensions for JavaScript" (RxJS).

  • RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
  • It is a powerful tool that turns complicated series of actions into concise code that is easy to manipulate.


What is Stream in RxJS?

  • A stream is a sequence of data elements made available over time.
  • A stream can be thought of as items on a conveyor belt being processed one at a time rather than in large batches.
  • The reason for it being called a stream is that you should think of the data as continuous and not really having an end, unless you explicitly define an end.


What is Observable?

  • Observable represents the idea of an invokable collection of future values or events.
  • In RxJS, we model asynchronous data streams using observable sequences or just called observables, too.

React RxJS


What is the benefits of RxJS Observables on promises?

  • Observables provide a feed, so that you can receive data from the same object multiple times.
  • So observables work like streams of data.
Cold and Hot Observables

What is the difference between Cold and Hot Observables ?

Cold Observables:
  • Cold observables start to run upon subscription, so observable sequence only starts pushing values to observers when subscribe is called.
Hot Observables:
  • Hot observables produce values even before subscriptions is made.
  • Hot observables such as mousemove events, stock pickers or WebSocket connections, are already produced in values even before subscription is active


What is the difference between React and RxJS ?

  • React is an open-source JavaScript library providing a view for data rendered as hyper text markup language.
  • RxJS stands for Reactive Extensions for JavaScript. It is a library for composing asynchronous programming in web development and event-based programs using observable sequences and LINQ-style query operators.


React RxJS

What are RxJS Operators ?

  • An operator is a method that acts on an Observable and changes the stream in some way.
  • The purpose of operator is to modify or filter the originally emitted values in a way that we normally need for the project tasks.

React RxJS


What are observers ?

  • Observer is a set of callbacks that are informative to listen to the values of the Observable.
  • Observers may listen or subscribe to the data being observed.

What are the advantages of Observable over Promise ?

  • An Observable is like a Stream. It enables to pass zero or more events where the callback is called for each event.
  • Observable is preferred over Promise because it provides the features of Promise and more.
  • With Observable we can handle a single or multiple events.
  • Observable also has the advantage over Promise to be cancelable.
  • Observable allows lazy initialization.
  • Observable allows to format data
  • Observable provides operators like map, forEach, reduce etc

What is Subscriptions ?

  • Subscriptions are objects returned when an Observable is subscribed.
  • Listening to the stream is called subscribing.


What is Subject ?

  • Subjects are unique types of Observers, that enables you to subscribe to other Observables and also listen to published data
  • Listening to the stream is called subscribing.


What does a subject do in RxJS?

Subject helps in aloowing the values to be multicast for many observers.They are multicast instead of plain observables, it is the equivalent of an event emitter and also the only way of multicasting a value or event or multiple observers.
Subjects implements observable and observer interfaces.There are 3 types of subjects: ReplaySubject, BehaviorSubject and AsyncSubject

What is RxJS concatMap?

ConcatMap is a combination of 2 operators(concat and map), it lets us mapping a value from a source observable to an observale stream.When the inner observable lets it valoue and pass it down to an observable.It helps in collecting all the emitted values from all of the inner observables and emits it into the subscribers.
Concat is used for taking each form value and in transforming into an observer HTTP,known as inner observer.It also helps in subscribing to the inner observable and also sends the output to the observable result.
React RxJS


What are switchMap, mergeMap and concatMap?

These are the operators used to flatten the observables, they are applicable in different scenerios.Switvh and Merge maps are the most powerful and they are frequently used as the operators.
Mergemap used in creating an observable immediately for any other source item and it keeps the observables alive.
Concatmap are used for crating a new observable.
Switchmap helps in completing the previous observable and creates the next observable.

What is the use of mergeMap?

mergeMap os also known as flatmap, which is used for flattening an inner observable and also in controlling the number of inner subscription.It also helps in maintaining multiple active inner subscription at once.
It starts emitting the values from replacing the original values and it does not cancle any of the inner observables.
Here is an example of mergeMap:
mergeMap(project: (value: T, index: number) => O): OperatorFunction<T, ObservedValueOf<O>>


React RxJS


What is the Reactive Manifesto?

Reactive Manifesto helps in defining the core principles of reactive programming and it underpins the principles of reactive programming.
React RxJS
Types of Reactive Systems are as follows:
  • Responsive - helps in detecting and dealing the problems quickly, by providing rapid and consistent response times.It also simplifies error handling, builds end user confidence, and encourages further interaction.
  • Resilient - it helps in recovering each componenet that are delegated with external component and also ensures high availibility by replication.
  • Elastic - helps by implying designs which have no contention points in resulting the ability for sharding and replicating components.
  • Message Driven - acts as an asynchronous message-passing for establishing a boundary between the components that ensures loosecoupling, isolation and location transparency.

What is Angular Material?

Angular Material is a UI component which helps in creating attractive, consistent and fully functional web pages, it includes browser portability and graceful degradation.Angular Material has good performance as every millisecond counts.
For using Angular Material components, you need to import the appropriate modules. We will do this in the APP-module:
import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
 
@NgModule({
  imports: [
    MatCardModule,
    MatListModule,
    MatButtonModule,
    MatDialogModule,
    MatInputModule,
    MatIconModule,
    MatDividerModule,
  ],
})


What are the key features of Angular?

The key features of the Angular are as follows:
Templates
Model View Controller
Dependency Injection
Directive
Code splitting
Validation
Testing
Data Binding
Localization

How can we get current value of RxJS Subject or Observable?

The observable and subjects does not have a current value, and is emitted or passed to the subcribers and yhe observable is done with it.If we want to have the current or uses BehaviorSubject that is designed for this purpose.As it keeps the emitted value and emits to new subscribers.
import {Storage} from './storage';
import {Injectable} from 'angular2/core';
import {Subject}    from 'rxjs/Subject';

@Injectable()
export class SessionStorage extends Storage {
  private _isLoggedInSource = new Subject();
  isLoggedIn = this._isLoggedInSource.asObservable();
  constructor() {
    super('session');
  }
  setIsLoggedIn(value: boolean) {
    this.setItem('_isLoggedIn', value, () => {
      this._isLoggedInSource.next(value);
    });
  }
}


How can we close a dropdown on click outside?


export class UserMenuComponent {

    _isVisible: boolean = false;
    _subscriptions: Subscription = null;

    constructor(public subjects: SubjectsService) {
    }

    onClick(event) {
        event.stopPropagation();
    }

    set isVisible(v) {
        if( v ){
            setTimeout( () => {
this._subscriptions =  this.subjects.userMenu.subscribe((e) => {
                       this.isVisible = false;
                       })
            }, 0);
        } else {
            this._subscriptions.unsubscribe();
        }
        this._isVisible = v;
    }

    get isVisible() {
        return this._isVisible;
    }
}

The dropdown component are set to be visible ans subscribes to Global rxjs subjects userMenu within the SubjectsService.

What is AOT Compilation?

Angular AOT contains mainly of components and their HTML templates.The components and templates are provided by the angular requires a compilation process before it can run in browser.AOT helps in converting Angular HTML and TypeScript code in to efficient JavaScript code while building phase before the browser downloads and runs the code.
Here are some reasons you might want to use AOT:
Faster rendering
Fewer asynchronous requests
Smaller Angular framework download size
Detect template errors earlier
Better security