Top 50+ Essential Angular interview Questions and Answers

Why Do i want a Framework?

Are you preparing for the Angular Interview and unsure what topics can help you on Angular interview questions. If you’re undecided what a JavaScript (or client-side) framework is, that’s a technology providing United States of America the correct tools to develop an internet application whereas additionally shaping however it ought to be designed and the way the code ought to be organized. Angular is used to develop Mobile and Web applications on a single platform. Here are top 50 Angular interview Questions and Answers that can help you to crack your interview.

Most JS frameworks of late square measure self-opinionated, which means they need their own philosophy of however the online app ought to be engineered and you’ll ought to pay your time to be told the core ideas. different solutions, like Backbone, don’t instruct developers on however they ought to craft the project, therefore some folks even decision such technologies merely libraries, instead of frameworks.

angular Interview questions coding

Actually, JavaScript frameworks emerged not that way back. I bear in mind times wherever websites were engineered with poorly structured JS code (in several cases, power-driven by jQuery). However, client-side UIs became a lot of and a lot of advanced, and JavaScript lost its name as a “toy” language. fashionable websites trust heavily on JS and therefore the ought to properly organize (and test!) the code has arisen. Therefore, client-side frameworks became well-liked and today there square measure a minimum of dozen of them.

Angular Introduction: What Angular IS

AngularJS wont to be the “golden child” among JavaScript frameworks, because it was ab initio introduced by Google corporation in 2012. it absolutely was engineered with the Model-View-Controller idea in mind, tho’ authors of the framework typically known as it “Model-View-*” or perhaps “Model-View-Whatever”.

The framework, written in pure JavaScript, was supposed to decouple Associate in Nursing application’s logic from DOM manipulation, and geared toward dynamic page updates. Still, it wasn’t terribly intrusive: you’ll have solely a neighborhood of the page controlled by AngularJS. This framework introduced several powerful options permitting the developer to form wealthy, single-page applications quite simply.

Specifically, a remarkable idea of information binding was introduced that meant automatic updates of the read whenever the model (data) modified, and contrariwise. On prime of that, the thought of directives was given, that allowed inventing your own markup language tags, dropped at life by JavaScript. as an example, you’ll write:

This is a custom tag which will be processed by AngularJS and turned to a full-fledged calendar as educated by the underlying code. (Of course, your job would be to code the suitable directive.)

Another quite vital factor was Dependency Injection, that allowed application parts to be wired along during a means that expedited reusable and testable code. Of course, there’s way more to AngularJS, however we’re not planning to discuss it totally during this article.

AngularJS became well-liked terribly quickly and received a great deal of traction and there are lots of Angular interview Questions that are unanswered. Still, its maintainers determined to require another step any and proceeded to develop a replacement version that was ab initio named Angular a pair of (later, merely Angular while not the “JS” part). It’s no coincidence the framework received a replacement name: truly, it absolutely was totally re-written and redesigned, whereas several ideas were reconsidered.

The first stable unleash of Angular a pair of was revealed in 2016, and since then AngularJS began to lose its quality in favor of a replacement version. one amongst the most options of Angular a pair of was the flexibility to develop for multiple platforms: net, mobile, and native desktop (whereas AngularJS has no mobile support out of the box).

Then, to form things even a lot of advanced, by the top of 2016, Angular four was free. “So, wherever is version 3?”, you would possibly surprise. i used to be asking identical question, because it seems that version three was ne’er revealed at all! however might this happen? As explained within the official journal post, maintainers determined to stay with the linguistics versioning since Angular a pair of.

Following this principle, ever-changing the key version (for example, “2.x.x” becomes “3.x.x”) implies that some breaking changes were introduced. the matter is that the Angular Router part was already on version three. Therefore, to repair this placement it absolutely was determined to skip Angular three altogether. Luckily, the transition from Angular a pair of to four was less painful than from AngularJS to Angular a pair of, tho’ several developers were still quite confused regarding all this mess.

Any application implementing state management will have following items:





The app will have some initial state (State 1)

User interaction with application generates actions like INCREMENT / DECREMENT that increases or decreases the count

Depending on the action type, reducer updates the store with state 2 or state 3

That updated store changes users view

What is Store?

Store is one single entity where you can combine the state of whole web application, and acts as a database for the application

This can be altered only through reducers by dispatching actions

What are Actions?

Actions are simple objects that are dispatched to reducers when a user interacts with the application.

These describe state changes to your application.

Action is composed of type and payload

export interface Action {
type: string;
payload?: any;
Type property is a string that uniquely identifies your action to your application.

Payload has ? symbol, meaning this property is optional. It can be an object that passes additional data.

What are Reducers?

If you consider store as your database, reducers will be the tables.

Reducers are the slices of application structure that have a particular state.

It is a Pure Function that defines how the slice (state) will be changed when an action is dispatched.

You might wonder what is Pure Function?

Reducer and State

State of the application can be changed only through reducers, which

Take action and old state as its two arguments.

Perform some logic depending on action type, and

Return new state as defined in interface below:

let reducer: Reducer<number> =
(state: State, action: Action) => {
return state;

Pure Functions do not change the provided value and give the same output always, when the same value is given multiple times.

Hence they are immutable, have no side effects and are easy to test.

Example: return (value + 1)

These basic questions are for interviewing junior developers. It’s important to know before hiring a
Junior Angular developer that they will need guidance from more experienced developers. A great
junior dev will be able to execute tasks given by senior developers. Skip to the advanced section if
you need someone who can lead your Angular project.
Skill Requirements for Junior Java Developers
● Basic HTML, CSS, JavaScript and TypeScript skills
● Foundational Angular knowledge
● Learning on the job
● Following instructions and receiving feedback
● Thinking like a programmer
Example Angular Basic Interview Questions and Answers
Note: Important keywords are underlined in the answers. Bonus points if the candidate mentions

Angular Interview Questions and Answers 2020

Question 1: Write an example of a simple HTML document with some header information and
page content.
Requirement: Basic HTML skills

Angular coding questions
Answer: HTML documents are all different, but they follow a basic structure of head and body. Here
you’re checking the candidate has a good grasp of HTML document structure and basic tags such
as DOCTYPE, html, head, title, meta, body, h1, p, etc.
For example:
<!DOCTYPE html>
<title>Page Title</title>
<meta charset=”UTF-8″>
<meta name=”description” content=”Page description”>
<h1>Interview Example Web Page</h1>
<p>Some content goes here</p>

Question 2: In JavaScript, how can the style of an HTML element be changed?
Requirement: Basic JavaScript skills
Answer: For example, to change the font size:
document.getElementById(“someElement”).style.fontSize = “20”;

Question 3: What’s the difference between unit testing and end-to-end testing? What are some
testing tools you would use for an Angular application?
Requirement: End-to-end and unit testing
Answer: Unit testing is a technique to test that isolated segments of code are functioning properly.
End-to-end testing involves checking that entire sets of components to make sure they are working
together properly and that the application is working as you would expect. End-to-end tests often
simulate user interactions to test that an app is functioning as it should. Jasmine and Karma are all
great testing tools.

Open-Ended Questions
Once you’ve established that your developer is an expert with some Angular coding interview
questions, you should ask some less technical questions. These should spark a discussion and you
should tailor them to fit your own job requirements. Don’t be afraid to ask follow up questions!

angular interview questions medium

Question 4: Briefly explain the CSS box model. Write some code snippets to describe show what
you mean.
Requirement: Basic CSS skills
Answer: CSS is the language that describes how webpages look. Every front-end developer should
have good CSS knowledge. Good candidates will be able to describe CSS concepts concisely.
The CSS box model refers to the layout and design of HTML elements. It’s a box shape that wraps
around each HTML element. A box is made up of its content, padding, border and margin.
● Content of the box
● Padding
● Border
● Margin
(the same padding on all 4 sides)
padding: 25px;
(padding for the top, right, bottom, left)
padding: 25px 50px 75px 100px;
(top/bottom padding 25 pixels, right/left padding 50 pixels)
padding: 25px 50px;

angular 8 interview questions

Question 5: Write some code for a basic class in TypeScript with a constructor and a method.
Requirement: Basic TypeScript skills
Answer: Here’s a simple class that is created with a greeting message which can be retrieved with
the greet() function
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
greet() {
return “Hello, ” + this.greeting;
let greeter = new Greeter(“world”);

Question 6: Describe how you would approach solving (some problem) on a high level?
Requirement: Thinking like a programmer
Answer: In this question, the problem should be directly related to the work the candidate will
actually be doing. You aren’t looking for a perfect answer or even necessarily a correct answer.
Instead, listen to how they approach solving a problem, their ability to break a problem down into
parts, and if they can anticipate problems.

Question 7: What are some advantages of using Angular framework for building web
Requirement: Expert Angular knowledge
Answer: Advantages of using the Angular framework include:

● Angular does lots of things for you under the hood. It saves time for developers by doing a
lot of the work for them like writing tedious DOM manipulation tasks
● TypeScript and the Angular framework allow you to catch errors much earlier
● In many cases has faster performance than traditional web development techniques
● Can give web apps the feel of a desktop application
● It separates out the code of an application to make it easier for multiple developers to work
on an app and easier to test
● More consistent code base that’s easy to maintain
● Big developer community

Question 8: What are Single Page Applications? How do they work in Angular?
Requirement: Foundational Angular knowledge
Answer: Single Page Applications (SPAs) are web applications that use only one HTML page. As the
user interacts with the page, new content is dynamically updated on that master page. Navigation
between pages happens without refreshing the whole page. Angular uses AJAX and to dynamically
update HTML elements. Angular Routing can be used to make SPAs. The result is an application
that feels more like a desktop app rather than a webpage.

Question 9: What’s the basic syntax of a Decorator in Angular?
Requirement: Foundational Angular Knowledge
Answer: @() with optional parameters.
Question 10: What is [(ngModel)] used for?
Requirement: Foundational Angular Knowledge
Answer: Two-way data binding.
Question 11: What are the basic parts of an Angular application?
Requirement: Foundational Angular Knowledge
Answer: Modules, Component, Data Binding, Template, Directives, Dependency Injection, Services,
Question 12: Tell me about a time you received feedback on a task.
Requirement: Following instructions and receiving feedback
Answer: This is a typical open-ended question. The candidate should demonstrate they can accept,
understand and act on feedback.
Question 13: What function is called when an object is created in TypeScript? What is it’s basic
syntax in TypeScript code?
Requirement: TypeScript knowledge
Answer: The constructor function is called. It’s syntax is: Constructor(){}
Question 14: In Angular, how can you interact between Parent and Child components?
Requirement: Expert Angular knowledge
Answer: When passing data from Parent to Child component, you can use the @Input decorator in
the Child component. When passing data from Child to Parent component, you can use the @Output
decorator in the Child component.
Question 15. Write an example usage of ngFor for displaying all items from an array ‘Items’ in a
list with <li>.
Requirement: Expert Angular knowledge
<li *ngFor=”let item of Items”>

cts angular interview questions

Question 16: If you provide a service in two components’ “providers” section of @Component
decorator, how many instances of service shall get created?
Requirement: Foundational Angular knowledge
Answer: 2
Question 17: What is the main difference between constructor and ngOnInit?
Requirement: Foundational Angular knowledge
Answer: The constructor is a feature of the class itself, not Angular. The main difference is that
Angular will launch ngOnInit after it has finished configuring the component. Meaning, it is a signal
through which the @Input() and other banding properties and decorated properties are available in
ngOnInit, but are not defined within the constructor by design.
Angular Advanced Interview Questions
Here are some more advanced and technical interview questions and answers for experienced
Angular developers. Use them to pick out the right Angular developers with the skills to build your
web app.
An expert Angular developer has to know the Angular framework inside and out. They will also be
able to design efficient applications, write clean and robust code, work effectively with your team,
and pass on their experience to junior developers. Remember to list your requirements before you
choose your questions.
Skill Requirements for Senior Angular JS Developers
● Expert Angular knowledge and its different versions (2, 4, 5, 6, 7)
● Component based architecture
● Designing for specific requirements (e.g. security, scalability, optimization)
● Maintaining and upgrading applications
● Experience in frameworks/toolkits/libraries you use
● Efficient programming and clean code
● Debugging
● End-to-end testing and unit testing
● Leadership skills
● Clear communication skills
● Mentoring less experienced developers

Example Angular Advanced Interview Questions and Answers
Note: Important keywords are underlined in the answers. Listen out for them!
Question 18: What modules should you import in Angular to use [(ngModel)] and reactive forms?
Requirement: Middle Angular knowledge, Tools/libraries
Answer: FormsModule and Reactiveforms Module.
Question 19. What is the sequence of Angular Lifecycle Hooks?
Requirement: Foundational Angular knowledge
Answer: OnChange() – OnInit() – DoCheck() – AfterContentInit() – AfterContentChecked() –
AfterViewInit() – AfterViewChecked() – OnDestroy().

Question 20: How similar is AngularJS to Angular 2?
Requirement: Middle Angular knowledge
Answer: Both are front-end frameworks maintained by Google, but Angular 2 is not a simple update
of AngularJS, it is a new framework written from scratch. Updating an app from AngularJS to Angular
2 would require a complete rewrite of the code.
Question 21: What were some features introduced in the different versions of Angular (2, 4, 5
and 6)?
Requirement: Expert Angular knowledge, Component-based architecture
Angular 2:

angular 6 interview questions
● Complete rewrite of the Angular framework
● Component-based rather than controllers/view/$scope. This allows more code to be reused,
easier communication between components and easier testing
● Much faster
● Support for mobile devices
● More language choices such as TypeScript
Angular 4:
● An update to Angular 2, not a complete rewrite. Updating from Angular 2 to 4 just requires
updating the core libraries
● Improvements to Ahead-of-time (AOT) generated code
● Support for new versions of TypeScript
● Animation packages are removed from the core package
● Else block

angular interview questions edureka

Angular 5:
● Focused on making Angular smaller and faster to use
● Http is depreciated and HttpClient API client is now recommended for all apps
● Supports TypeScript 2.3
● Introduction of a build optimizer
● Angular Universal State Transfer API
● Improvements to the Angular Compiler
● Router Lifecycle Events
● Better cross-browser standardization
Angular 6:
● Better service worker support
● Better URL serialization
● Ivy rendering engine
● ng update and ng add
● <template> element completely removed
● Angular Elements/Custom Elements
● Form validation changes
● Schematics
Question 22: What is Change Detection, how does Change Detection Mechanism work?
Requirement: Expert Angular knowledge
Answer:Change Detection is the process of synchronizing a model with a view. In Angular, the flow
of information is unidirectional, even when using the ng Model to implement two-way binding, which
is syntactic sugar on top of a unidirectional flow.
Change Detection Mechanism-moves only forward and never looks back, starting from the root
(root) component to the last. This is the meaning of one-way data flow. The architecture of an
Angular application is very simple — the tree of components. Each component points to a child, but
the child does not point to a parent. One-way flow eliminates the need for a $digest loop.

Question 23: What is Transpiling in Angular?
Requirement: Middle Angular knowledge, TypeScript
Answer: Transpiling means converting the source code of one programming language into another.
In Angular, that usually means converting TypeScript into JavaScript. You can write the code for
your Angular application in TypeScript (or another language such as Dart) that is then transpiled to
JavaScript for the application. This happens internally and automatically.
Question 24: What is AOT Compilation?
Requirement: Expert Angular knowledge, Optimization
Answer: AOT refers to Ahead-of-time compilation. In Angular, it means that the code you write for
your application is compiled at build time before the application is run in a browser. It’s an
alternative to Just-in-time compilation, where code is compiled just before it is run in the browser.
AOT compilation can lead to better application performance.

angular 7 interview questions

Question 25: What are HTTP Interceptors?
Requirement: Middle Angular knowledge
Answer: Interceptor is just a fancy word for a function that receives requests/responses before they
are processed/sent to the server. You should use interceptors if you want to pre-process many
types of requests in one way. For example, you need to set the authorization header Bearer for all
import { Injectable } from ‘@angular/core’;
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from
import { Observable } from ‘rxjs/Observable’;
export class TokenInterceptor implements HttpInterceptor {
public intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
const token = localStorage.getItem(‘token’) as string;
if (token) {
req = req.clone({
setHeaders: {
‘Authorization’: `Bearer ${token}`
return next.handle(req);
And register the interceptor as singleton in the module providers:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { HTTP_INTERCEPTORS } from ‘@angular/common/http’;

import { AppComponent } from ‘./app.component’;
import { TokenInterceptor } from ‘./token.interceptor’;
imports: [
declarations: [
bootstrap: [AppComponent],
providers: [{
useClass: TokenInterceptor,
multi: true // < – – – – an array of interceptors can be registered
export class AppModule {}
Question 26: How many Change Detectors can there be in the whole application?
Requirement: Expert Angular knowledge
Answer: Each component has its own ChangeDetector. All Change Detectors are inherited from
Question 27: What change detection strategies do you know?
Requirement: Expert Angular knowledge
Answer: There are two strategies – Default and OnPush. If all components use the default strategy,
Zone checks the entire tree regardless of where the change occurred. To inform Angular that we
will comply with the performance improvement conditions, we need to use the onpush change
detection strategy. This will tell Angular that our component depends only on the input and any
object that is passed to it should be considered immutable. This is all built on the Principle of the
mile automaton, where the current state depends only on the input values.

Question 28: How do you update the view if your data model is updated outside the ‘Zone’?
Requirement: Expert Angular knowledge
Answer: Using the ApplicationRef.prototype.tick method, which will run change detection on the
entire component tree.
1. Using method, which will also run change detection on the entire tree.
The run method under the hood itself calls tick, and the parameter takes the function you
want to perform before tick.
2. Using the ChangeDetectorRef.prototype.detectChanges method, which will launch change
detection on the current component and its children.
Question 29: Why do we need lazy loading of modules and how is it implemented?
Requirement: Middle Angular knowledge
Answer: Lazy loading of modules is needed to break the code into pieces. When downloading the
app in the browser, it doesn’t load all of the application code. During the transition to the route with
lazy loading, the module has to load the code into a browser.
Exemple for using lazy loading modules:
{ path: ‘example’, loadChildren: ‘./example/example.module#ExampleModule’, component:
PublicComponent },
Question 30: What are Core and Shared modules for?
Requirement: Middle Angular knowledge

angular questions pdf

Answer: A Shared module serves as a generic module for all modules, components, directives,
pipes, etc., which are not required to be in a single copy for the application but need to be imported
into many different modules.
A Core module is a place to store services that you need to have in the form of singleton for the
entire application (for example, a user authorization service with data storage about it).
Question 31: What are some points to consider when optimizing an Angular 6 application for
Requirement: Application performance optimization
Answer: There are many ways, some ideas include: AOT compilation, bundling and uglifying the
application, tree shaking, lazy loading, separating dependencies and devDependencies, Using
OnPush and TrackBy, removing unnecessary 3rd party libraries and import statements, avoid
computing values within the template.
Question 32: What are some important practices to secure an Angular application?
Requirement: Designing for security
Answer: Some basic guidelines include:
● Check that all requests come from within your own web app and not external websites
● Sanitize all input data
● Use Angular template instead of DOM APIs
● Content Security Policies
● Validate all data with server-side code
● Use an offline template compiler
● Avoid including external URLs in your application
● Make JSON responses non-executable
● Keep all libraries and frameworks up-to-date
Question 33: Describe a time you fixed a bug/error in an application. How did you approach the
problem? What debugging tools did you use? What did you learn from this experience?
Requirement: Debugging, Breaking down a problem into parts
Debugging is one of the key skills for any software developer. However, the real skill is in breaking
the problem down in a practical way rather than finding small errors in code snippets. Debugging
often takes hours or even days, so you don’t have time in an interview setting. Asking these
questions will give you an idea of how your candidate approaches errors and bugs.
Answer: In the candidate’s response you should look out for things like:
● A measured, scientific approach
● Breaking down the problem into parts
● Finding out how to reproduce the error
● Expressing and then testing assumptions
● Looking at stack traces
● Getting someone else to help/take a look
● Searching the internet for others that have had the same problem
● Writing tests to check if the bug returns
● Checking the rest of the code for similar errors
● Turn problems into learning experiences
Question 34: What’s the most important thing to look for or check when reviewing another team
member’s code?
Requirement: Mentoring less experienced developers, Leadership skills
Answer: Here you’re checking for analysis skills, knowledge of mistakes that less experienced
developers make, keeping in mind the larger project and attention to detail.
A good answer might mention code functionality, readability and style conventions, security flaws
that could lead to system vulnerabilities, simplicity, regulatory requirements, or resource
Question 35: What tools & practices do you consider necessary for Continuous Integration and

Question 36:In Package.json, to include the latest version we can use ______.

~ symbol


^ symbol

None of the options


Question 37:App folder contains ______ and tests folder contains ______.

controllers, testing methodologies

script files, tests

None of the options

tests, filters

script files, tests

Question 38:In AngularJS, a controller can be tested with ______.

Protractor and Karma

Jasmine and Karma

Jasmine and Protractor

None of the options

Jasmine and Protractor

Question 39:Protractor is built on top of ______.





Question 40: ppet , if we pass 3e,5?

vm.add = function(a,b){
if(typeof a !== ‘number’ || typeof b !== ‘number’){
return ‘invalid args’;
return a+b;
runtime error

invalid args

compile time error

logical error

Answer: Invalid args

Question 41:The following code is used to install Protractor _________.

npm install -g protractor

With Grunt

None of the options

With Jasmine

npm install -g protractor

Question 42:Grunt runs tasks using temporary files, which are disk I/O operations.




Question 43:The testing framework we have used in our course is ____.

None of the options




angular 4 interview questions

Question 44:When will you start writing the unit test?

As desired by the tester

During test planning

During mock

As soon as possible

After each module completion

As soon as possible

Question 45:The webdriver-manager can be used, and the necessary binaries can be downloaded using _______.

webdriver-manager update-binaries
webdriver-manager update
webdriver-manager binary-update
webdriver-manager auto-update
webdriver-manager update-binary

webdriver-manager auto-update

Question 46:To run the test, we have to type ______.

karma start

Start Jasmine

Run Jasmine

Load Karma

Answer: Karma Start

Question 47:_____ is all about splitting your code into small testable modules with each module having its own functionality and level of abstraction.

None of the options

Unit testing

E2E testing

Integration testing

Question 48:Which one of the following is a Bower Concept?


None of the options




Question 49:Testing an individual working part of source code is called _____.

Integration testing

E2E testing

Unit testing

All the options

Answer: unit Testing

Question 51:The E2E testing framework for AngularJS is ______.



All the options



Question 52:__________ is similar to @ngrx/effects, as both are models for performing side-effects.






Question 53:________ is a popular State Management Library.






Question 54:The state in which the app gets loaded is called ________.

Default state

Initial state

Original state

Default state

Question 55:Reducers take the previous state and __________ to compute the new state.






Question 56:Which of the following is needed to add side-effect capabilities to your application?






Question 57:__________ handles async calls.

Smart component



Dumb component


Question 58:@ngrx is a utility toolkit built upon principles defined by _________.





Answer: Redux

Question 59:Which component interacts with services?

Dumb component

Smart component

Smart component

Question 60:State can be mutated only through __________.




Side Effects


Question 61:You install ngrx using which command?

ng install @ngrx/core @ngrx/store save

npm install @ngrx/core @ngrx/store save

npm install ngrx/core ngrx/store save

ng install ngrx/core ngrx/store save

npm install @ngrx/core @ngrx/store save

Read our other articles on

TOP IOT Questions and Answers, Angular wiki

Summary : We hope you like the above set of questions for Angular Interview Questions and Answers. If you have any queries or questions please send your comments to us. We would like to have your feedback.

About Author

After years of Technical Work, I feel like an expert when it comes to Develop wordpress website. Check out How to Create a Wordpress Website in 5 Mins, and Earn Money Online Follow me on Facebook for all the latest updates.

Leave a Comment