Top Angular Interview Questions and Answers in 2021

By | April 26, 2021
Angular Interview Questions

Angular has become one of the most popular frameworks for building front-end web applications. This set of Angular Interview Questions will certainly be helpful to clear your interview, but before we get into that, let us quickly recap about Angular.

Top Angular Interview Questions and Answers

What is Angular?

AngularYou would think, Ah… Yet another framework to learn. But Angular is genuinely different. You will enjoy learning this TypeScript based open-source front-end web application framework. Before I tell you more, let me clear that Angular is different from AngularJS but has been done by the same Google team who did AngularJS. It was initially developed as a Single Page Application (SPA), but then better tools like React and Vue were released, so Angular had to be made into something more – if it was to be what it is today!


This frontend framework has loads of reusable and robust components, and you can write clean, maintainable code with that. In 2018, Angular was ranked as the second most used technology, the first one being Node.js. The real power of Angular came with its version 4, which offered backward compatibility, faster compilation, more reusability leading to less coding, better libraries for HTTP requests, conditional disabling of animations, and much more.

Angular is based on HTML, CSS, and TypeScript and is a great platform to build both desktop and mobile applications.

Wait… what?

But I recently read somewhere that browsers do not support typeScript!

Yes, TypeScript is converted into another language (JavaScript). This process is called transpiration (and not compilation).

Angular is also called Angular 2+. Since Angular is based on TypeScript, it accommodates all the features of JavaScript as well as TypeScript. Angular 2 interview questions help the Aspirants to crack the interview and get their dream job.

Why Angular?

Now comes the critical question

Angular comes with a host of benefits and features that are apt for enterprise applications and websites that have a lot of dynamic content or multiple workflows. Whether it is exhaustive documentation, or extensive support by Google, or component-based architecture (from version 2), Angular has all you can ask for from a web development framework. Some reasons why you should use Angular are –

  • Great support by Google, thus making the platform user-friendly and trustworthy.
  • A component-based architecture where the application is divided into functional and logical components that are independent of each other. Parts can be decoupled, replaced, or reused easily. This type of architecture also ensures easier testing at each stage.
  • A lot of reusable code and third-party components are available, thus improving productivity.
  • The code is rendered faster because it gets converted from TypeScript (or HTML) to JavaScript during the build process itself. This is called the Ahead-of-Time (AOT) compilation.
  • Command Line Interface (CLI) – CLI facilitates development in the most efficient way. You can create a new project, add your functionalities, and test them quickly. Further, initialization and configuration become easy too.
  • Angular six allows adding custom elements to web apps built with other environments like React, Vue, jQuery, etc.…
  • Angular six also included an Ivy renderer that translates components and templates into JavaScript by rendering. During the process, any unused code is removed, thus making web apps load faster.
  • Angular Universal is used for server-side rendering, helps increase the number of users on the website and faster loading of pages.
  • Excellent documentation and support community

How to crack Angular interview?

Just relax. Angular is very easy, and if you have hands-on experience, you would be able to answer most of the questions. There are no tricky questions in Angular. In the Angular interview itself, you might be asked some questions about TypeScript as well. Additionally, you can share your experience of working with Angular. Sometimes, there may be subjective questions like, what other technologies have you worked with, comparison between two techniques built for the same purpose from your perspective (for example, which one was more comfortable, which one had a better learning curve, etc…), or even your personal opinion about which is your favorite technology out of the ones you have worked. The answer depends on your individual experience, and this is where you can gain that extra edge. The more personalized experience you share, the more interested the interviewer will be in asking you further questions. The Angular interview questions and answers below are purely technical, and sometimes your answer will naturally lead to the next question. These Angular Interview Questions also be useful in Angular 5 interview questions, Angular 6 interview questions, Angular 7 interview questions, and Angular 8 interview questions.

Angular Interview Questions

Question: What is Angular/What do you know about Angular?

Answer: If you have mentioned Angular in your resume, indeed, this will be the first Angular question you will be asked.

Angular is an open-source, front-end web development framework based on TypeScript. It is most suited for developing enterprise web applications because the code is reusable and maintainable. Angular started as a SPA (Single-Page-Application) framework and now supports dynamic content based on different users through dependency injection. YouTube TV is the most popular company that uses Angular.

Question: What is the purpose of Angular?

Answer: The purpose of using Angular is to create fast, dynamic, and scalable web applications with ease, using components and directives.

Question: What are the essential building blocks of Angular?


  1. The concept of Angular is based around Components, which is the first building block. Components follow a tree structure where the App component is the root component. A component encapsulates the logic of the view, data, and HTML mark-up. Every app must have at least one part. The more the parts of smaller size, the better is the readability of the code.
  2. Module, the second most crucial building block is a container that groups related components. The default module in an application is the app module. Blades should be small in size and have related components.

The other essential building blocks of Angular are:

  • Templates: Templates are written in HTML and contain Angular elements and attributes. Models provide a dynamic view to the user by combining information from the controller and view and rendering it.
  • Directives: Directives allow developers to add new HTML syntax, which is application-specific. The behavior is essentially added to the existing DOM elements.
  • Services: Rather than calling the Httpservice, Angular allows for the creation of new service classes. When new Services are created in Angular, they can be used by different components.

Angular Building Blocks

Question: What is the difference between Angular and AngularJS? (Angular Vs AngularJS)

Answer: Here are the differences between both –

AngularJS Angular
Based on JavaScript Based on TypeScript
Based on the MVC design pattern Based on components, modules, and directives
No support for mobile app Supports mobile
Can’t build SEO friendly applications SEO friendly applications can be easily created
Dependency Injection tokens can only be strings. Also, only the injector is present. DI Tokens can be of any type, for example, strings or class. Angular follows a tree-hierarchy for injectors starting with the root injector, and a nozzle for each component henceforth.
No support or backward compatibility Backward compatibility can be done without issues. Also, there is a lot of support documentation for the same.
Uses $routeprovider.when() for routing Routing is done using @RouteConfig[()]
Requires specific ng directive for each property, event, and image For event binding, () is used and for image or property binding [] is used

Question: Mention some of the features of Angular

Answer: Some important features are –

  • Component-based architecture – applications are written as a set of independent components
  • Parts can be created, tested, integrated using Angular CLI.
  • Great support for complex animations without writing much code
  • Because of the component router, Angular supports automatic code-splitting. Hence only the code required to render a particular view is loaded
  • Cross-platform application development
  • Template syntax for creating UI views.

Question: Discuss some advantages of using Angular

Answer: There are many advantages apart from the fact that Angular gives us a break from the MVC pattern, as it follows a Component-based structure. Here are some more critical benefits –

  • Supports two-way data binding
  • Supports validations and template syntax (both angular and static)
  • We can add custom animations, directives, and services
  • The event handling process is seamless
  • Hierarchical Dependency Injection structure (Parent-child)
  • Provision to facilitate RESTful services and client-server communication

As a follow-up, the interviewer(s) may ask you more about any of the above advantages. One or two lines should be sufficient. We will answer each as you read further questions.

Question: Can you think of any disadvantages of using Angular?

Answer: Not as a disadvantage, but in some scenarios, Angular may not be the right fit. For example, short-term projects or light-weight websites that have more static content do not require a complex Angular framework. Same way, apps that have a microservice design approach will find too many unused features if they use Angular since it is a complete solution. There is less flexibility for the developer to choose additional tools.

Question: What is Angular CLI? How do you use it?

Answer: Angular CLI automates the end-to-end development process. The app’s initialization, configuration, and development process become straightforward and easy. With a CLI (Command Line Interface), we can create a new project, add new features, and run tests (unit tests and end-to-end tests) by just typing a few simple commands. This way, development and testing processes both become faster.

For example,

To create a new application, we should type –

ng new <appname> [options]

to create a class using CLI (in Angular 7), we have to type –

ng generate class MySampleClass [options]

to generate a component,

ng g c <componentname>

Question: What are directives in Angular?

Answer: With directives, developers can write application-specific custom HTML syntax. The new language is written in the DOM, and the Angular compiler executes the directive functions when it finds a new HTML syntax. There are three types of directives – attribute, component, structural.

Question: Mention an example of the structural directive.

Answer: Structural directives change the structure of DOM. Examples, *ngIf and *ngFor. Usage example –

<div *ngIf = “product” class=”name”>{{}}</div>

Same way,

<li *ngFor = “Show product list”>{{}}</li>

Question: How is Dependency Injection (DI) done in Angular?

Answer: In Angular, a class asks for services or objects when it is instantiated, which means if a class is invoked, it doesn’t create any objects, rather it depends on an external source to instantiate objects, services, or parameters. In this process, an injectable service is created and registered. Injectors can be configured in 3 different ways,

  • @Injectable() decorator for the service
  • @NgModule for NgModule
  • @Component for component

Question: What are templates in Angular?

Answer: The template is simply an HTML view where binding controls can display data to the properties of the Angular component. Templates can be defined inline using the template property as –


<div>My sample Template</div>

Or can be called from a different HTML file by using @Component decorator’s URL property –

templateUrl: ‘app/app.component.html’

Question: How are Angular expressions different from JavaScript expressions?

Answer: Both are similar and can have operators, variables, and literals. However, some differences between both are –

Angular expressions JavaScript expressions
Conditions, exceptions, and loops (control statements) cannot be used All the control statements can be used
Regular expressions cannot be used Regex is widely used
Filters can be used within the expression itself so that data is formatted before being displayed Such a concept doesn’t exist
Expressions are evaluated against a scope object Expressions are evaluated against the global window
Expression evaluation forgives to undefined or null If there are issues in evaluating an expression or property, JS generates ReferenceError or TypeError.
Functions cannot be declared Any number of functions can be declared
New, comma, bitwise, void operators cannot be used. These are possible

You can mention any 3-4 to the examiner. If they specifically ask, you can say that particular point of difference.

Question: Explain the architecture of Angular?

Answer: As we have seen in Question 2, Components, modules, templates, etc. are the main building blocks of Angular. All of these are again based on modules, which provide compilation context for components. When asked in the interview, you can talk about the essential building blocks and then draw the following diagram (source: angular documentation) to depict the relationship between each –

You can see that the view is contained in the template, and properties are bound from components to the template. The DI services are injected by the injector into the parts as required. Directives are added to the model. Modules contain the core logic like services, values, functions, and components.

Question: Tell us some differences between component and directive.

Answer: The component is a specific type of directive, that has a view.

Component Directive
To register component, Annotation used is @Component @Directive is used to register a directive
The primary purpose of ingredients is to break the complex application into smaller, more manageable parts (components) The purpose of the `directive is to create new custom components that are reusable
Each DOM element can have only one component Any number of directives can be used in one DOM element
Component mandatorily requires @View decorator, template, or template URL to specify the view. A directive has nothing to do with views

Question: What is the primary language used in Angular?

Answer: Angular is based on TypeScript and HTML. HTML is used for the template, and TypeScript (a superset of JavaScript) is used for components.

Q: What is the angular latest version?

Answer: The Stable Version of Angular is 11.1.2 which was released on 3 February 2021.

Question: What is data binding, and what are the different categories of data binding?

Answer: Data binding is used to connect the application data and DOM i.e. components with the template. They can be categorized based on the direction of the data flow.

Data flow Direction Type Description
From source to view (one-way) Interpolation – Attribute, style, class, property Interpolates values calculated from application data into HTML
From light view to the source (one-way) Event Enables applications to respond to users in the target environment
View-source-view (two-way) Two-way Changes in the application state automatically get reflected in the view and vice-versa. For this type of binding, ngModel directive is used.

Question: Explain the differences between one-way binding and two-way binding


One-way binding Two-way binding
The view doesn’t change or update automatically whenever there is a change in the data model. Custom code needs to be manually written to reflect changes. UI or view is continuously updated automatically as the data model changes. The process is similar to the synchronization process.

Question: What are the various filters supported by Angular?


Filter name Description
Uppercase Convert string to uppercase
Lowercase Convert string to lowercase
Date Convert date to the specified format
Currency Convert the number to currency format
Number Format number into a string
Orderby Orders an array by specific expression
limitTo Limits array into the specified number of elements; string to specified number of characters
Json Format object to JSON string
Filter A select a subset of items from the array

You can mention few of them and show an example as well –

<p>Amount: {{ amount | currency }}</p>

Question: What are ngmodules? Differentiate between Javascript modules and NgModules.

Answer: NgModule was introduced after Angular 2, to enable developers to declare all the relationships in one place with metadata. Thus, in short, NgModules are built from metadata that describes components, services, directives, pipes, etc… Angular then creates a component factory, a class that creates components.

Difference between JS modules and NgModules –

JS modules NgModules
Bounds all the classes Bounds only declarable classes
All the member classes are defined in a single file The module’s classes are listed in the @NgModule.declarations list
Cant extend the entire application with services The entire application can be extended with services using @NgModules.providers list to add providers
Can import or export any kind of classes It can import or export only those declarable classes that it owns or imports from other modules.

Question: What are ngIf and ngFor? Can you show a small example to use them?

Answer: Just like if and for in other languages, ngIf and ngFor are used as control statements. Example –

<p *ngIf="display">Show this only if the Boolean "display" is true</p>

Where the display is a boolean with the value true or false. Learn more about ngIf.

ngFor is used to loop through and display elements of an array (set of data).

<tr *ngFor="let student of students; let i = index">

The second part (i=index) is optional and only needed if you want to display the index.

Question: Which is the latest version of Angular? What are the new features in it?

Answer: The latest version is Angular 11.2.5. Some features are –

  • Support for TypeScript 3.4
  • Dynamic import for lazy routes
  • Web workers
  • Differential loading for application code
  • Introduction of Angular Ivy – improved payload size, backward compatibility, faster re-build time, easier debugging, etc…

Question: What is a component?

Answer: The component is a logical piece of code. The component consists of a template (that contains the HTML (or URL) that needs to be rendered), class (a class that defines properties and methods that supports the view), and metadata (defined using decorator).

Example –

@Component ({
selector: 'my-app',
template: ` <div>
<div>What is your name?</div>

Question: Is there a way to convert the Typescript code into Javascript code? How is it done?

Answer: Yes, converting TypeScript into JavaScript is called as transpiration.

Question: What is the digest cycle?

Answer: The digest cycle is the process of monitoring the watchlist to track the changes in the value of the watch variable. The digest cycle is implicitly triggered, but we can also trigger it manually using the $apply() function.

Question: What is a pipe? Write a simple code to demonstrate.

Answer: Pipe (|) is used to transform input data into the desired format. For example,

<p>Price is {{ price | currency }}</p>

Question: Can you create a parameterized pipe in the above example?

Answer: Yes,

<p>Price is {{ price | currency : “USD$” : 0.00 }}</p>

Question: Explain how you can chain pipes?

Answer: We can add any number of filters using pipes –

<p>Average is {{ average | uppercase | number}}</p>

Question: Is it possible to create a custom pipe? How?

Answer: Yes, we can create custom pipes.

  • Pipe metadata @Pipe decorator can be imported from the core Angular library
  • The pipe is a class that is decorated with the above metadata (@Pipe({name: ‘myCustomPipe’}))
  • The next step is to define the transformation. For this, the pipe class should implement the method transform() of PipeTransform class.
  • Specify the pipe name in the main code
<p>Size: {{number | myCustomPipe: 'Error'}}</p>

Question: What is the purpose of an async pipe?

Answer: Async pipe subscribes to a promise or an observable, and returns the latest value. If a new value is emitted, the pipe marks the component that needs to be checked for any changes.


Question: What is the difference between pure and impure pipes?


Pure pipe Impure pipe
Doesn’t get affected by internal state Can produce different output for the same input based on the internal state
Can be shared with many different instances It cannot be shared because the internal state can be affected by any factors.

Question: Explain the importance of HttpClient.

Answer: HttpClient is a simplified HTTP API for Angular applications. It gives better observable APIs, better error handling mechanisms, testability, request and response interception, typed request, and response objects. The HttpClientAPI rests on the XMLHttpRequest interface exposed by the browsers.

Question: How does Angular router work?

Answer: Angular router interprets a browser URL as commands to navigate to a client-generated view. The router is bound to the links on a page. This way Angular knows to navigate the application view to the required page when a user clicks on it.

Question: What are the router navigation events?

Answer: Router navigation events help track the lifecycle of a route. These are –

  • NavigationStart,
  • RouteConfigLoadStart,
  • RouteConfigLoadEnd,
  • RoutesRecognized,
  • GuardsCheckStart,
  • ChildActivationStart,
  • ActivationStart,
  • GuardsCheckEnd,
  • ResolveStart,
  • ResolveEnd,
  • ActivationEnd
  • ChildActivationEnd
  • NavigationEnd,
  • NavigationCancel,
  • NavigationError
  • Scroll

Question: Is the routing module mandatory for an application?

Answer: No, the routing module can be totally skipped if there are simple configurations.

Question: What is a wildcard route?

Answer: Wildcard route has a path that consists of two asterisks (**) that can match any URL. It is helpful when a URL doesn’t match any of the predefined routes. Instead of throwing errors, we can use a wildcard route and defining a component for the same.

Question: Explain the lifecycle hooks.

The set of processes that Angular goes through from initiation through end together are called lifecycle hooks.

ngOnChanges This method is called when the value of a data-bound property changes
ngOnInit This is called whenever the initialization of the directive/component happens.
ngDoCheck This method is for detecting and taking action on changes that Angular won’t detect on its own.
ngAfterContentInit This is called in response after Angular projects any external content into the component’s view.
ngAfterContentChecked This is called in response after Angular checks the content projected into the component.
ngAfterViewInit This is called in response after Angular initializes the component’s views and child views.
ngAfterViewChecked This is called in response after Angular checks the component’s views and child views.
ngOnDestroy This is the clean-up done before Angular destroys the directive/component.

Question: How are animations done in Angular?

Answer: To use the animation module, it has to be enabled. For this, the BrowserAnimationModule has to be imported.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
After this, import the required animation functions into the component files. Example,
import {
// ...
} from '@angular/animations';

Next, add the animation metadata property within the @Component() decorator in the component file.

selector: 'app-root',
templateUrl: 'app.component.html',
animations: [
// animation triggers go here

Question: What are the special transition states?

Answer: Special transition states are wildcard (*) and void. Wildcard matches any animation state. The void state is used to configure transitions for elements entering or leaving a page.

Question: How can you disable all the animations in Angular?

Answer: To disable all the animations, place the @.disabled host binding on the topmost Angular component.

  1. Explain the steps to create a reusable animation.

To create an animation that can be reused, use the animation() method, and define the animation in a separate .ts file. Declare this animation as a const export variable. This can be then imported and reused in any app components that use the useAnimation() API. Check an example on the Angular website.

Question: Mention some of the functions that help control complex animation sequences.


query() finds one or more inner HTML elements within the current element being animated in the sequence
stagger() applies a cascading delay (timing gap) after each animation
group() runs multiple animation steps in parallel.
sequence() runs animation steps one after another (sequentially)

Question: Explain the features of forms in Angular.

Answer: There are 2 approaches to handle form data (user inputs) – reactive and template-driven.

Reactive forms can be used when you are using reactive patterns in your application and forms are a key part of your application. These forms are scalable, robust, and testable.

Template-driven forms are used to add simple forms, for example, a sign-up page. These are not as scalable as reactive forms and should be used only if your form requirements are simple and minimal.

Question: How is metadata represented in Angular?

Answer: Metadata is represented using decorators like class decorators, property decorators, method decorators, property decorators. Example, @Component, @NgModule etc…

Question: What are class decorators in Angular?

Answer: Class decorator contains the metadata of the suitable class type. It appears just before the class definition and declares the class to be of a certain type. Some class decorators are – @Component, @NgModule, @Pipe, @Directive, @Injectable.

Question: Explain the difference between annotations and decorators in Angular.

Answer: Annotations are hardcoded features of Angular and store array in it. The compiler creates an attribute of the annotated class and instantiates an object of the same name, passing the metadata to the constructor.

Decorators, on the other hand, are functions that receive the object to be decorated. After receiving, they are free to modify the object in the way it likes. Decorators are implemented by the TypeScript compiler.

Question: What is the difference between class decorators and class field decorators?

Answer: Class decorators appear just before class definition, whereas class field decorators appear just before a field in the class definition. Examples of class decorators are @Component, @NgModule, etc… Examples of a class field decorator are @Input, @Output, etc…

Question: What is package.json? Explain its purpose.

Answer: With the JSON package, it becomes easy to manage the project dependencies. We can mention details like the version, language, etc… in package.json. For example, if typescript is used in our project, we can mention typescript and its version in package.json. Examples are metadata.json, tsconfig.json, etc…

Question: What does {{}} represent? What is it used for? Show an example.

Answer: The double curly braces represent interpolation. It is a special syntax. Angular converts it into property binding. You can think of it as an alternate for property binding. The name of the component is written inside the inner curly braces. During execution, the name is replaced by the actual string value of the property. For example,

<img src="{{imgname}}" style="height:30px">

Angular will evaluate and replace apptitle and imgname with their actual values.

Question: What does the representation [()] mean?

Answer: This is a representation for ngModel used for two-way data binding. It is written as [(ngModel)] = “propertyvalue”.

Question: What is a bootstrapping module in Angular?

Answer: The root module that you bootstrap to launch the application is called as a bootstrapping module. Every Angular application has a bootstrapping module. It is also called the AppModule. The bootstrapping module is mentioned in the AppModule class.

declarations: [
imports: [
providers: [],
bootstrap: [AppComponent]
export class AppModule { }

Question: Talk about some differences between Promise and Observable.


Promise Observable
Executes immediately as soon as created Executes only when the subscription starts
Used with .then() clause Has chaining and subscription to handle complex applications
Errors are pushed to child promises Centralized and predictable error handling by the use of subscribe() method
Provides only one value Can provide multiple values over time

Question: What is the Single Page Application? How is it different from traditional web technology?

Answer: In a single page application (SPA), only the home page (index.html) is maintained throughout even though the URL keeps on changing. It is faster and easier to implement when compared with traditional web technology. In traditional technology, every time a user makes a request, the request is passed on to the server. This takes more time.

Question: What are the different types of compilations in Angular?

Answer: Two types of compilations – AOT (Ahead-of-Time) and JIT (Just-in-Time).

Question: List the differences between Just-in-Time (JIT) compilation and Ahead-of-Time (AOT) compilation.

Answer: With JIT, the compilation happens during run-time in the browser. It is the default way used by Angular. The commands used for JIT compilation are –

ng build
ng serve

In AOT compilation, the compiler compiles the code during the build itself. The CLI command for aot compilation is –

ng build --aot
ng server –aot

AOT is more suitable for the production environment whereas JIT is much suited for local development.

Question: Which one is better out of AOT and JIT?

Answer: AOT reduces the load and bootstrap time of the application. The pages also load faster. Any errors are also shown during the time of application build itself. Hence, AOT is a better option.

Question: Discuss some differences between Angular and jQuery. Which one is most suitable for a complex website with many workflows?


Angular jQuery
Front end framework based on TypeScript and JavaScript JS library that supports animation and DOM manipulation
Two-way data binding is possible Two-way data binding cannot be done
Form validation can be done No option for form validation
Supports RESTful APIs No support for RESTful APIs

For a complex website with multiple workflows, Angular is more suitable and easier to develop and maintain.

Question: What is an Angular library? Can you create your own library in Angular?

Answer: Angular library is a set of generic solutions that other developers have put together to be re-used. We can create our own library using Angular. These libraries can be published and shared as npm packages. A library should be imported into the app.

Question: What do you know about the npm package?

Answer: The components, framework, and CLI used by Angular applications are packaged as npm packages. Npm packages can be downloaded using the npm CLI client.

Question: Write a sample code to create a library.

Answer: You can use the Angular CLI for this. The following set of commands generates a new library skeleton –

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib


If you want to learn Angular or AngularJS, check out some nice tutorials on Youtube. There are many more Angular interview questions and AngularJS interview questions but this list covers all the basics and most frequently asked concepts. Let us know in the comments if you want us to add questions from your personal experience to this list.

You may be also interested in:

Leave a Reply

Your email address will not be published. Required fields are marked *