Must Know RxJS Interview Questions
In this post, questions from RxJS & Angular Interviews will be answered for Experienced and
Freshers. We're trying to share our experience and learn how to help you make progress in your
career.
RxJS INTERVIEW QUESTIONS
What is RxJS?
What is Stream?
What is Observable?
What is the difference between an observable and a promise?
What is the difference between Cold and Hot Observables?
What are RxJS Operators?
What is Observers and Subscriptions?
What is Subject?
What are different types of Subject?
What are different between of Subject, BehaviorSubject and ReplaySubject?
What is Reactive programming and how does it relate to Angular?
What is RxJS Map and What is Higher-Order Observable Mapping?
When we use the switchMap, mergeMap and concatMap?
What is RxJS concatMap?
What is RxJS mergeMap?
What is RxJS switchMap?
What is NgRx?
When we use zip and combineLatest and withLatestFrom?
What is Angular?
How to build full stack web application?
What is latest version of Angular?
What is difference between Angular and AngularJS?
What is Angular Material?
What is AOT (Ahead-Of-Time) Compilation?
What's New with Angular 8 Features? Angular 8 interview Questions
What's new in Angular 6?
What is ViewEncapsulation and how many ways are there do to do it in Angular?
Q: What is RxJS?
Ans:
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 uses JavaScript reactive programming. RxJS is very popular because it makes writing asynchronous code simple for developers.
Q: What is Stream?
Ans:
A stream is a key part of reactive programming. In simple terms,
"A stream refers to values of data overtime"
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.
Q: What is Observable?
Ans:
"Observable represents the idea of an invokable collection of future values or events."
In RxJS, you model asynchronous data streams using observable sequences Or just called observables, too.An Observable is an object that over time and asynchronously emits multiple data values (data stream).
Click here to know more.
Q: What is the difference between an observable and a promise?
Ans:
Promise:
A Promise emits a single event at the completion or failure of an async operation.- promise emits a single value
- A promise is Not Lazy A Promise cannot be cancelled
Observable:
An observer is like a stream and allows you to pass at least zero or more events where the callback is needed for each event.- Observable is favored over Promise, it can emits multiple values over a time.
- The "Observable" is cold. It's not called until we're registered to it.
- You may cancel an Observable with the unsubscribe() method
- Observable provides a lot of efficient operators like map, foreach, filter, reduce, retry, retryWhen etc.
Q: What is the difference between Cold and Hot Observables?
Ans:
"Cold observables start to run in up and subscription, so observable sequence only starts pushing values to observers when subscribe is called.
You can use cold observable if you don't want to produce data before any observer is subscribed, for example Ajax call.
"hot observables produce values even before subscriptions made.
Hot observables such as mousemove events, stock pickers or WebSocket connections, are already produced in values even before subscription is active
if you want to share some resources or data between many subscribers, you have to use hot observables.
Q: What are RxJS Operators?
Ans:
A stream is a key part of reactive programming. In simple terms,
"An operator is simply a method that acts on an Observable and changes the stream in some way. The purpose of operator, to modify or filter originally emitted values in the way we need for the project tasks.
To understand commonly used RxJS Operators click here
Q: What is Observers and Subscriptions?
Ans:
Observers and Subscriptions are related to the concept of Observable.
Observers:
Observer is a set of callbacks that know how to listen to the values of the Observable.
- Observers are also referred to as listeners (or consumers)
- Observers may listen or subscribe to the data being observed.
Subscription:
Subscription is an observable execution
- Subscriptions are objects returned when an Observable is subscribed.
- Subscription is useful mainly to cancel the execution
Q: What is Subject?
Ans:
Subjects are special types of Observers, so you can also subscribe to other Observables and
listen to published dataSpecial thing about subject is they are multicasted. It means - "The values are multicasted to many Observers" while default RxJS Observable is unicast
To understand RxJS Subject, click here
Q: What are different types of Subject?
Ans:
There are two types of Subjects : BehaviorSubject and ReplaySubject.
Q: What are different between of Subject, BehaviorSubject and ReplaySubject?
Ans:
Subject :
In case of Subject, Observers who are subscribed at a later date will not obtain the data values emitted prior to their subscription.
ReplaySubject :
In ReplaySubject, Observers who are subscribed at a later point will receive all the old data values issued prior to their subscription. As it operates by using a buffer that holds the values emitted and re-emits (replaying) a sequence of old values once new Observers are subscribed.
BehaviorSubject :
BehaviorSubject functions similar to ReplaySubject but only re-issues the last emitted value (current value). So you're interested in the last / current value of the observer, if BehaviorSubject is useful.Q: What is Reactive programming and how does it relate to Angular? Ans:
The principle of responsive programming is that you can just build the different streams and operations that take place on those flows by specifying the whole program.Angular uses RxJS for some aspects of its internal service, such as Http, Router, etc.
RxJS is a very powerful library that facilitates the design of applications.
Checkout our related posts :
Q: What is RxJS Map and What is Higher-Order Observable Mapping?
Ans:
RxJS map operator lets us project the payload of the Observable into something else.The power of Observables is revealed when you start using Rx operators to transform, combine, manipulate, and work with sequences of items emitted by Observables.
To understand RxJS Map and Higher-Order Observable Mapping click here
Q: When we use the switchMap, mergeMap and concatMap?
Ans:
concatMap(), mergeMap(), switchMap() and exhaustMap(). All of these operators are flattening
operators used to flatten observables, but they are applicable in very different scenarios.
switchMap and mergeMap are probably
going the be the most powerful and frequently used operators. Its is thereby critical to understand
the difference between the two in order to spend less time debugging code.
To understand core concept of RxJS Map and different merge strategy click here
Q: What is RxJS concatMap?
Ans:
concatMap : Projects each source value to an Observable which is merged in the output
Observable, in a serialized fashion waiting for each one to complete before merging the next -
Official RxJS Docs
To understand RxJS concatMap click here
Q: What is RxJS mergeMap?
Ans:
mergeMap : mergeMap allows for multiple inner subscriptions to be active at a time. Because of
this, one of the most common use-case for mergeMap is requests that should not be canceled.
To understand RxJS mergeMap click here
Q: What is RxJS switchMap?
Ans:
switchMap : Simply put, it means switching to a new observable. The previous inner observable
(result of the function you provided) is canceled for each emission and the new observable is
subscribed.
To understand RxJS switchMap click here
Q: What is NgRx?
Ans:
NgRx stands for Angular Reactive Extensions, NgRx Store provides reactive state management for Angular apps inspired by Redux. NgRx has libraries for managing both global and local state. Isolation of side effects in order to achieve a more streamlined component architecture. Developer tooling that makes it easier for developers to construct a variety of applications.
Refer for more questions on NgRX Interview Questions
Q: When we use zip and combineLatest and withLatestFrom?
Ans:
zip and combineLatest are functions and withLatestFrom is operator that allows to combine a
few observable sequences in a different ways, that are really helpful in real world application.
Composing functions and operators usually accept observables as their params and also they return observable that emits array with values produced by argument observables. This result observable emission logic is different depending on which operator or function we use
To understand RxJS more about Zip and combineLatest and withLatestFrom, click here
Q: What is Angular?
Ans:
It's a frontend framework, which was developed to build a single page application (SPA). Click here to understand more about Angular.
Q: How to build full stack web application?
Ans:
Angular is extremely famous for modern web application development, Spring Boot and Angular
are a strong and developer-friendly combination if you want to create the full stack web
application.
To know more about Angular Spring Boot Example click here
Q: How to implement authentication in web application?
Ans:
We can use Spring Boot JWT with Angular for token authentication in web application.
To know more about Angular Spring Boot JWT Example click here
Q: What is latest version of Angular?
Ans:
The lastest version of Angular framework is Angular 9 which is in pipeline to release in this
month.
To know more about Angular 9 features, click here
Q: What is difference between Angular and AngularJS?
Ans:
Here are few differences between Angular and AngularJS are stated as follows
- AngularJS supports the MVC design model. Angular relies on components and directives instead.
- Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI
- In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively
- AngularJS doesn’t have mobile support while Angular does have
- While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular
Q: What is Angular Material?
Ans:
It is a UI component library. Angular Material helps in creating attractive, consistent, and
fully functional web pages as well as web applications. It does so while following modern web design
principles, including browser
portability and graceful degradation.
Q: What is AOT (Ahead-Of-Time) Compilation?
Ans:
The Angular Ahead-of-Time compiler pre-compiles application components and their templates
during the build process. Apps compiled with AOT launch faster for several reasons.
- Templates are embedded as code within their components so there is no client-side request for template files.
- At the end of the restore view phase of the JSF request lifecycle, Seam attempts to restore any previous long-running conversation context. If none exists, Seam creates a new temporary conversation context.
- Application components execute immediately, without client-side compilation
- The compiler discards unused Angular directives that a tree-shaking tool can then exclude
Q: What's New with Angular 8 Features? Angular 8 interview Questions
Ans:
Angular 8
has been official release in May 2019, new features in Angular 8 are limited, but there are still
there are a lot of interesting
things happening, we have much awaited Ivy compiler as an opt-in feature, ng deploy is officially
support by CLI and many more.
Below are the most prominent features of Angular 8:
- Differential Loading of Modern JavaScript:
- Angular 8 supports TypeScript 3.4
- The new compiler for Angular 8 is Ivy Rendering Engine
- Angular 8 enhance supports for building Web Workers
- Angular 8 provides dynamic imports for lazy-loaded modules
It is the most important feature in terms of performance, so new apps generated by Angular CLI to have two different bundles for legacy JavaScript(ES5) and modern JavaScript(ES2015+). This translation has provided better the speed for modern browsers which has ES2015 support to download small app bundles.
In the newest version of Angular 8, it has updated the core dependencies which include tools like RxJS and TypeScript to v3
Another much awaited feature, the new rendering engine, and Bazel, the new build system, which make possibility to build your CLI application more quickly. An opt-in preview of the two should be available shortly
The improvements that have been made to Angular CLI bundling to eliminates the need to put the web workers in a separate file
Lazy-loaded routes now use the standard dynamic import syntax instead of a custom string. This means that TypeScript and linters will be strict checking when modules are missing or misspelled. lazy-loaded import that looked like this:
{ path: '/admin, loadChildren: './ admin / admin.module#AdminModule' }Will be looked like this:
{ path: `/ admin`, loadChildren: () => import(`./admin/ admin.module`).then(a => a.AdminModule) }The CLI continues to improve, and the ng build, ng test and ng run are now designed to be expanded by third-party libraries and software. For example, with a deploy order, AngularFire is already using these new capabilities.
2 New Unit Test Helpers were introduced so that we can upgrade Angular Project to Unit Test Angular Service
The new feature of Angular 8 has benefits, such as:
- Faster loading time
- Pre-compilation of code and rebuilding is done more faster
- Reduction in app bundle size- reduce up to 90%
- It does not affect SEO negatively
Q: What's new in Angular 6?
Ans:
Below major new aspects introduced in Angular 6:
-
RxJS 6
- Angular 6 makes use of RxJS 6 internally, RxJS released a library called rxjs-compat, that allows you to still using one of the “old” syntaxes. -
Elements:
lets you wrap your Angular components as Web Components and embed them in a non-Angular application -
i18n (internationalization):
Without having to build the application once per locale, any Angular application can have “runtime i18n” -
Tree-shakeable providers:
recommended, way to register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute -
New Rendering Engine:
Ivy - increases in speed and decreases in application size.
Q: What is ViewEncapsulation and how many ways are there do to do it in Angular?
Ans:
To put simply, ViewEncapsulation determines whether the styles defined in a particular component
will affect the entire application
or not. Angular supports 3 types of ViewEncapsulation:
- Emulated : Styles used in other HTML spread to the component
- Native : Styles used in other HTML doesn’t spread to the component
- None : Styles defined in a component are visible to all components of the application