Angular 6 interview questions for experienced/Angular 6 Interview Questions and Answers for Freshers & Experienced

What are the utility functions provided by RxJS?

The RxJS library also provides below utility functions for creating and working with observables.

1. Converting existing code for async operations into observables
2. Iterating through the values in a stream
3. Mapping values to different types
4. Filtering streams
5. Composing multiple streams

How do you perform error handling in observables?

You can handle errors by specifying an error callback on the observer instead of relying on try/catch which are ineffective in asynchronous environment.

For example, you can define error callback as below,

next(num) { console.log('Next num: ' + num)},
error(err) { console.log('Received an errror: ' + err)}

What is RxJS?

RxJS is a library for composing asynchronous and callback-based code in a functional, reactive style using Observables. Many APIs such as HttpClient produce and consume RxJS Observables and also uses operators for processing observables.

For example, you can import observables and operators for using HttpClient as below,

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

How can you read full response?

The response body doesn't may not return full response data because sometimes servers also return special headers or status code which which are important for the application workflow. Inorder to get full response, you should use observe option from HttpClient,

getUserResponse(): Observable<HttpResponse<User>> {
return this.http.get<User>(
this.userUrl, { observe: 'response' });
Now HttpClient.get() method returns an Observable of typed HttpResponse rather than just the JSON data.

What is HttpClient and its benefits?

Most of the Front-end applications communicate with backend services over HTTP protocol using either XMLHttpRequest interface or the fetch() API. Angular provides a simplified client HTTP API known as HttpClient which is based on top of XMLHttpRequest interface. This client is avaialble from @angular/common/http package. You can import in your root module as below,

import { HttpClientModule } from '@angular/common/http';

The major advantages of HttpClient can be listed as below,

Contains testability features
Provides typed request and response objects
Intercept request and response
Supports Observalbe APIs
Supports streamlined error handling

What are the limitations with web workers?

You need to remember two important things when using Web Workers in Angular projects,

1. Some environments or platforms(like @angular/platform-server) used in Server-side Rendering, don't support Web Workers. In this case you need to provide a fallback mechanism to perform the computations to work in this environments.

2. Running Angular in web worker using @angular/platform-webworker is not yet supported in Angular CLI.

Explain string interpolation and property binding in Angular.

String interpolation and property binding are parts of data-binding in Angular.
Data-binding is a feature in angular, which provides a way to communicate between the component(Model) and its view(HTML template).
Data-binding can be done in two ways, one-way binding and two-way binding.
In Angular, data from the component can be inserted inside the HTML template. In one-way binding, any changes in the component will directly reflect inside the HTML template but, vice-versa is not possible. Whereas, it is possible in two-way binding.

String interpolation and property binding allow only one-way data binding.
String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template. Using property binding, we can bind the DOM properties of an HTML element to a component's property. Property binding uses the square brackets [ ] syntax.

What is Angular Language Service?

The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates whether they are external in an HTML file or embedded in annotations/decorators in a string. It has the ability to autodetect that you are opening an Angular file, reads your tsconfig.json file, finds all the templates you have in your application, and then provides all the language services.

What are the features included in ivy preview?

You can expect below features with Ivy preview,

1. Generated code that is easier to read and debug at runtime
2. Faster re-build time
3. Improved payload size
4. Improved template type checking

What is Angular Ivy?

Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.

Why was Angular introduced as a client-side framework?

Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular. Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.

Discuss the lifecycle designed for directive and components in Angular JS especially for the newly introduced version 6.0?

Components and directive of Angular JS follow the following typical lifecycle.

* nhOnInit
* ngDoCheck
* ngOnDestroy
* Constructor
* ngOnChanges
* ngAfterContentInit (only for components)
* ngAfterContentChecked (only for components)
* ngAfterViewInit (only for components)
* ngAfterViewChecked (only for components)

How do you provide configuration inheritance?

Angular Compiler supports configuration inheritance through extends in the tsconfig.json on angularCompilerOptions. i.e, The configuration from the base file(for example, tsconfig.base.json) are loaded first, then overridden by those in the inheriting config file.

"extends": "../tsconfig.base.json",
"compilerOptions": {
"experimentalDecorators": true,
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"preserveWhitespaces": true,

What is metadata rewriting?

Metadata rewriting is the process in which the compiler converts the expression initializing the fields such as useClass, useValue, useFactory, and data into an exported variable, which replaces the expression. Remember that the compiler does this rewriting during the emit of the .js file but not in definition files( .d.ts file).

Can I use any javascript feature for expression syntax in AOT?

No, the AOT collector understands a subset of (or limited) JavaScript features. If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file. Later point of time, the compiler reports an error if it needs that piece of metadata to generate the application code.

Explain use of systemjs.config.json in Angular 6?

The system.config.json file is used to configure the SystemJS for the Angular application. It also allows for different modules to load compiled using the TypeScript compiler.

What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology?

In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well.

In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

How to convert observable to array in angular 2?

You should subscribe to your observable to convert into an array.

How to cancel observable in angular 6?

Cancel and unsubscribing Observable are the same thing. You can use the unsubscribe function over the subscription object to unsubscribe the observable in Angular 6. You can also use the async pipe or the takeUnitil operator in Angular 6 to can cancel the observable.

How to use observable in angular 6?

An observable is implemented using the RxJS library to work with the asynchronous events and it provides a way of publishing data in JavaScript. You have to subscribe to the observable to receive values from the observables. To subscribe to the observable, you can use either async pipe or using the actual subscribe method. You can perform operators such as map(), filter(), Concat(), and flatMap() with the observable.

Please explain the digest cycle in Angular?

The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle.

Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.

How to import observable in angular 6?

The observable in Angular 6 can be implemented using the RxJS library to work with the asynchronous events. The RxJS gives a number of functions to create new observable to simply the process of creating it from things such as events, timers, promises, and so on.

You can create an observable from a promise, a counter, an event, from an AJAX request.

What are the advantages with AOT?

Below are the list of AOT benefits,

1. Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
2. Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.
3. Smaller Angular framework download size: Doesn't require downloading the Angular compiler. Hence it dramatically reduces the application payload.
4. Detect template errors earlier: Detects and reports template binding errors during the build step itself
5. Better security: It compiles HTML templates and components into JavaScript. So there won't be any injection attacks.

Why do we need compilation process?

The Angular components and templates cannot be understood by the browser directly. Due to that Angular applications require a compilation process before they can run in a browser. For example, In AOT compilation, both Angular HTML and TypeScript code converted into efficient JavaScript code during the build phase before browser runs it.

List some Inbuilt Pipes available in Angular

Below are the list of few Pipes available in Angular Js

* DatePipe
* CurrencyPipe
* AsyncPipe
* DecimalPipe
* TitleCasePipe
* JsonPipe
* SlicePipe
* PercentPipe
* UpperCasePipe
* LowerCasePipe

How to update or upgrade angular cli version

In order to upgrade angular-cli package that was installed globally in your system, you need to run following commands

npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest
Instead of upgrading global version of angular-cli you can also upgrade the local version for specific project y running following commands:

rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

How to generate a module in Angular?

In order to generate a module in Angular, cd to the current project directory and below command.

ng g module module_name

Write command to generate a component in specific module in Angular cli?

You can generate a component in specific module in AngularJs by running below commnad on CLI.

ng g component component_name --module=module_name

What are directives in Angular?

Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax. In actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM. Directives are of three types:

* Attribute Directives
* Component Directives
* Structural Directives

Explain the difference between an Annotation and a Decorator in Angular?

In Angular, annotations are used for creating an annotation array. They are only metadata set of the class using the Reflect Metadata library.

Decorators in Angular are design patterns used for separating decoration or modification of some class without changing the original source code.

Could you explain the concept of templates in Angular?

Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.

What is string interpolation in Angular?

Also referred to as moustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. {{ }}.

The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.

Explain use of systemjs.config.json in Angular 6?

The system.config.json file is used to configure the SystemJS for the Angular application. It also allows for different modules to load compiled using the TypeScript compiler.

What is HostListener in Angular 6?

The @HostListener is a decorator method in Angular 6 that is used for listening to DOM events. It listens to the DOM events on the host element of both the component and attribute components. It sets the listener once when the directive is initialized and removes the listener if the directive is destroyed.

What is Linting in Angular 6?

Linting is the process of running a program that analyses your code for programmatic and stylistic errors. It checks the code quality of the angular project specified.

What is promise in angular?

Promise in Angular, is used with asynchronous tasks.

Promises return only a single value as

* data or output if promise resolves
* or error message if promise rejects

Request initiated by a promise is not cancellable. Promise was added in Angular from Angular 2.
An observable in comparison, handles multiple events similar to a stream.

What is subscribe in angular 6?

Subscribe is an method in RxJS library and is used with observables.

The subscriber function defines how to obtain or generate values or messages to be published.

You create an Observable instance that defines a subscriber function, which is called when a consumer calls the subscribe() method

To execute the observable you have created and begin receiving notifications, you call its subscribe() method, passing an observer. This is a JavaScript object that defines the handlers for the notifications you receive. The subscribe() call returns a Subscription object that has an unsubscribe() method, which you call to stop receiving notifications.

How do I create a project in angular 2?

* Set Up the Development Environment. For building an Angular 2 project, you need to have the Angular CLI (command line interface).
* Create a New Project. Open a terminal window. ...
* Serve the Application. Go to the project directory and install node modules in your project directory.

What is NPM in angular?

NPM in angular is used for package management.

Angular framework and CLI are NPM packages and distributed by NPM registry.

NPM expands to Node Package Manager and is the default package manager for Node.js.

How do I create a project in angular 6?

Create a project in angular 6 by using Angular 6 CLI as

ng new project-name

A project structure is created.

How do I upgrade AngularJS 4 to 6?

Step 1: Globally upgrade the Angular CLI from 1.x to 6. Then using Command Install the angular-cli 6 globally:
Step 2: Upgrade Angular CLI version in project. Go to project the source directory.
Step 3: Identify the packages that need an upgrade.
Step 4: Upgrade packages.
Step 5: Solve peer dependency issues.

Upgrade to Angular 6 — Within 15 Minutes

* Add the new CLI. npm install @angular/cli@latest -g.
* Upgrade the CLI locally in your project. ng update @angular/cli.
* Upgrade Angular dependencies.
* Upgrade Angular dev dependencies.
* Upgrade Angular dependent dependencies.
* Upgrade Angular dependent dev dependencies.
* Install TypeScript 2.7.2.
* Install RxJS 6+

What do you mean by injector in AngularJS?

DI or Dependency Injection software design pattern which deals how components hold of their dependencies. The AngularJS injector is a subsystem present in it to create components, resolve their dependencies and also to provide them to other components if requested.

What is ngzone service in angular?

NgZone is used by developers to start change detection resulted by async operations automatically. It gives us back control of our code’s execution. It can be used to subscribe to an Observable that is present outside of the angular zone and also to return to the angular zone when reacting to the same Observable.

What is Traceur compiler in angular?

The Traceur compiler takes ES6 or ECMAScript Edition 6 which includes generators, classes, generators, etc. and compiles it down to regular JavaScript that runs smoothly with your browser.

What are the decorators and how do you create this?

Decorators are actually just functions that are called as per the component they are handling. A class decorator shall be called with the class being decorated and similarly for a method decorator. Here’s how to create a decorator in Angular 6:


Step 1:

function Console(target) {

console.log('Our decorated class', target);


Step 2:


class ExampleClass {

constructor() {




Explain FormGroup and FormControl in Angular?


The FormGroup has the role in tracking validity state and value of a group of FormControl.


In Angular, FormControl is used by developers to track the validation and values of a form of control. This can be both used as standalone as well as with the parent form. FormControlName and FormControlDirective directives are used when we work with FormControl class.

What is feature Modules and also explain types of feature Modules in Angular?

In Angular, feature modules are NgModules, used for the organizational best practice of code management. It delivers a cohesive set of functionality that is specific application focused.

There are five types of feature modules:
Routed feature modules
Domain feature modules
Routing modules
Widget feature modules
Service feature modules

What is template expression in angular 6? Explain with a syntax.

A template expression produces a value in Angular within double curly braces {{ }}. It executes the expression and assigns it to a property of the particular binding and the target can be an HTML element, a component, or a directive.

In terms of syntax, it is much similar to that of Javascript. Most of the JavaScript expressions are legal template expressions, with a few exceptions.

You can't use JavaScript expressions that have or promote side effects, including:

Assignments (=, +=, -=, ...)
Operators like new, typeof, instanceof, etc.
Chaining expressions with ; or ,
With increment and decrement operators ++ and --
Most of the ES2015+ operators

What is property binding? Explain with a syntax.

In Angular, Property binding is a technique that lets you set the property of a particular view element. It involves updating values within a property in the component and then binding it to an element inside the view template. Property binding in Angular uses the [ ] syntax for data binding. An example of this is setting the disabled state of a button.


// component.html

<button [disabled]="buttonDisabled"></button>


// component.ts


templateUrl: 'component.html',

selector: 'app-component',


export class Component {

buttonDisabled = true;


R4R Team
R4R provides Angular 6 Freshers questions and answers (Angular 6 Interview Questions and Answers) .The questions on website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,Angular 6 interview questions for experienced,Angular 6 Freshers & Experienced Interview Questions and Answers,Angular 6 Objetive choice questions and answers,Angular 6 Multiple choice questions and answers,Angular 6 objective, Angular 6 questions , Angular 6 answers,Angular 6 MCQs questions and answers Java, C ,C++, ASP, C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for Angular 6 fresher interview questions ,Angular 6 Experienced interview questions,Angular 6 fresher interview questions and answers ,Angular 6 Experienced interview questions and answers,tricky Angular 6 queries for interview pdf,complex Angular 6 for practice with answers,Angular 6 for practice with answers You can search job and get offer latters by studing .learn in easy ways .