AngularJS Interview Questions and Answers

Are you looking to change your job as an Angular developer? Then you need to prepare the top AngularJS Interview questions in 2024. Browse the top 100+ AngularJS Interview Questions And Answers and become familiar with the answers prepared by our industry experts.

Our AngularJS Interview Questions And Answers will cover all prominent topics including directives, angular components lifecycles, angular materials, pipes, angular forms, and other concepts that help you to clear the Angular interview. Acquaint yourself with the AngularJS interview question and answers that are frequently asked in interviews. 

• Angular 8 Interview Questions
• Angular 7 Interview Questions
• Angular 6 Interview Questions
• Angular 5 Interview Questions
• Angular 4 Interview Questions
• Angular 2 Interview Questions

Frequently Asked AngularJS Interview Questions 

1. What is AngularJS?
2. What are the Key Features of AngularJS?
3. Difference between Angular and AngularJS?
4. What are Angular Expressions?
5. Explain the difference between Angular and JQuery?
6. What is Angular CLI?
7. Explain the various features of Angular?
8. What are the Advantages of Angular?

Angular 8 Interview Questions

Angular 8 is the upgraded version of Angular 7 and a great platform to build mobile-based applications. These Angular 8 Interview Questions and Answers will make you familiar with the essential concepts of Angular 8 from basic to advanced to ace your next Angular 8 Interview

1. What is Angular 8?

Ans: Angular 8 version is released in May 2019 and it is a javascript framework to build applications in Typescript, HTML, and Javascript. Angular 8 supports unique and new features including angular material, CLI, and core framework. 

If you want to become an Angular Certified Specialist, then visit Mindmajix - A Global online training platform: “Angular Training Online”.  This course will help you to achieve excellence in this domain.

2. What is new in Angular 8?

Ans: The following features are new in Angular 8.

• Typescript: Angular 8 supports typescript 3.4.
• Ivy: Angular 8 supports.
• Bazel: Angular 8 support Bazel compiler.
• Location: To help people migrating from AngularJs, a bunch of things added to the location services in Angular. 
• Differential loading: It is a technique to increase your application performance. When you create applications for production, two bundles are created one bundle for older browsers that support only ESS and another bundle for new browsers that support only ES6+. 

Dynamic imports for lazy routes: Angular 8 uses standard dynamic import syntax so the syntax is customized to Angular.

3. What is the difference between Angular 7 and Angular 8?

Ans:

Angular 7	Angular 8
It is difficult to use	It is easy to use
It has features like CLI prompts, drag and drop, virtual scrolling, bundle budget, application performance, Nativescript, Angular elements, better error handling, etc.	It has new and unique features such as differential loading, Ivy rendering, Bazel, location services, etc.
Breaking changes in Angular 7 are Virtual scrolling, material design library, and Component Dev kit.	Breaking changes in Angular 8 are CLI, Angular material, and core framework.
It supports the lower version of Typescript 3.4	It does not support a lower version of Typescript 3.4
It supports all versions of Node.js	It supports Node.js 12 version.

4. What is bazel in Angular 8?

Ans: Bazel is a new feature in Angular 8 and it builds a new system that available for a short period of time. It provides a platform to make your frontend and backend with a similar tool. 

5. How are performance improvements on the core in Angular 8?

Ans: Angular 8 has advanced and unique features that make sure systematic workflow and performance improvements. It has apparent features like CLI workflow implementation, differential loading, Bazel, Ivy rendering, and dynamic imports for lazy routes.

6. How to install Angular 8?

Ans:

 Step 1:

Before installing Angular IDE using the Angular CLI tool, make sure that Node.js has already installed in your system.

• If Node.js is not installed in your system install it using the following steps.
• The basic requirement of Angular 8 is Node.js version 110.9.0 or later.
• Download node.js
• Install it on your system
• Open node.js command prompt
• Check the version run command, node-v in the console window

Step 2:

In order to install Angular CLI, use the following commands 

• npm install –g @angular/cli or npm install –g @angular/cli@latest

Step 3:

To check the node and angular CLI version, run command ng –version on the console terminal.

7. How to upgrade Angular 7 to 8?

Ans: Install TypeScript 3.4

• Use Node LTS 10.16 or its advanced version
• Run command on terminal panel/CLI -> ng update 

8. What are the features of Bazel?

Ans: The following are the main features of Bazel:

• It is an internal build tool, through which the application can be customized.
• It also tests the action and performance of multiple machines.
• It constructs a graph through which you can identify useful information.
• It also supports customization.runGuardsAndResolvers 

9. What is typescript in Angular 8?

Ans: The working of typescript in Angular 8 is similar with the enabled and disabled flag, which means if you want to test whether the selected value is an object or not, then the following syntax is used " Typeof value = = = 'object' ". In angular 8 the following types of checks are used such as “Typeof value.ngOnDestroy = = = 'function' “.

10. What is Angular 8?

Ans: Angular 8 introduced a number of new and unique options to runGuardsAndResolvers. In general, runGuardsAndResolvers is an option that is used for the Angular router configuration in order to control the resolvers and guards.

The first option available in runGuardsAndResolvers is pathParamsChange. Through, this option router will re-run the guards and resolvers. Whenever you want to control the resolvers and guards, use the runGuardsAndResolvers option in Angular 8.

Angular 7 Interview Questions

Go through these TOP 5 Angular 7 Interview Questions and Answers to improve your chances of performing well in your next Angular 7 interview.

1. Enumerate some salient features of Angular 7?

Ans: Following are the features of Angular 7:

• Angular Material gets Minor updates
• Better Accessibility for Selects
• Virtual Scrolling
• Drag & Drop
• Automated render as a user moves items
• Enhancing application performance.  

2. How to generate a class in Angular 7 using CLI?

Ans:

• Create a class in Angular 7 using the below code:
• ng generate class <name> [options]
• ng g class <name> [options]
• Where name refers to the name of a class.

Options refer to the project name, spec value is Boolean, or type of a file

3. What are the core dependencies of Angular 7?

Ans: There are two types of core dependencies in Angular 7: RxJS and TypeScript. 

• RxJS 6.3
• RxJS version 6.3 is used by Angular 7. It has no changes in the version from Angular 6
• TypeScript 3.1
• TypeScript version 3.1 is used by Angular 7. It is an upgrade from version2.9 of Angular 6.

4. How can you handle events in Angular 7?

Ans: There are various methods to handle events in Angular 7. The following are a few methods. 

1. Binding to user input events.
2. Get user input from the event object. 
3. Key event filtering.

5. Enlist types of forms in Angular 7?

Ans: The following are two types of forms in Angular 7: 

• Template-driven forms: All validations, controls, and logics are written in the template part.
• Reactive Forms: It uses an immutable and implicit approach to handle the state of form at a given point.

Angular 6 Interview Questions

This section on TOP 6 Angular 6 Interview Questions will present some commonly asked questions and how to answer them.

1. What is new in Angular 6?

Ans:

• Added support for creating Custom Elements based on Angular Components.
• Animations: expose elements and params within transition matches.
• Bazel: change ng_package rule to APF v6
• Single line, multiline and jsdoc comments are now supported
• compiler-cli: add resource inlining to ngc
• support for TypeScript 2.7
• Require node 8 as runtime engine

2. Provide a clear difference with some proper examples of code snippet between “declarations”, “providers”, and “imports” in ng module for angular 6?

Ans:

Declarations: This is one of the key features of Angular for available varieties components or pipes of a single directive for the current module to other directives of the current module. If someone is willing to use some of the same declared components in the current module from other directives then declaration should need to be done properly.

Imports: Helping of availability of other module components in a current module by importing the same.

Providers: It is helping DI for understanding and identifying using values and services.

3. How to generate a module in Angular 6?

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

ng g module module_name

4. What is mean by ngzone?

Ans: The ngzone is a wrapper for the  JavaScript files and denoted by Zone.js. These are the key libraries in which the tracking of asynchronous functions. It helps in creating the context for the functions.

5. Explain in detail with a proper example of genuine differences identified specifically between “constructor” and “ngoninit” for the Angular 6 version?

Ans: Constructor: Constructor is one of the default declarations for any specific class or object, it can be called every time when any class instantiated, also ensuring initialization properly of their subclasses and different instance variable fields.

Ngonint: It is one of the first initialize methods using by Angular, mention in the first component of an angular life cycle. It mainly indicated that angular has been completed of creating entire require components properly. It is not mandatory to use but the best practice to use.

6. What do you mean by the Bazel compiler in Angular 6?

Ans: Bazel compiler supports Angular 6 version and when you compile your entire code with the Bazel compiler, it compiles with the necessary code only.  The Bazel compiler uses advanced and local distributing cache systems, parallel execution, and optimized dependency analysis.

Angular 5 Interview Questions

The following section covers all the popular Angular 5 Interview Questions along with the answers to boost your preparation.

1. What are the new features in Angular5?

Ans: Angular5 came with a lot of new features that help and attract the developers at any point in time on Angular tasks. The following are the Angular5 new features. 

• AOT is a default feature. 
• Type checking utility for the template.
• The activated watching mode helps developers to debug the errors. 
• Saving metadata and fetching utilities.
• Unwanted files are removed permanently( *.ngfactory.ts)
• Displaying error messages to help developers to handle the error investigation.
• Feature upgrades are smooth than earlier.
• Introduced tree shakeable components. 
• Hybrid upgrade applications.
• Improve performance more than the earlier versions.

2. Provide proper generation logic of Component, Pipe, Class, Directive, Service, and Module for Angular 5?

Ans: In Angular5 commands are a little different than before Angular versions: 

Component: – ng g component my-new-component

1. Pipe: ng g pipe my-new-pipe
2. Class: ng g class my-new-class
3. Directive: ng g directive my-new-directive
4. Service: ng g service my-new-service
5. Module: ng g module my-new-module

3. List the types of data binding supported by Angular5?

Ans: Angular5 supports four types of data binding. They are as follows:

• String Binding
• Property Binding
• Event Binding
• Two-way Binding

4. How to run an Angular 5 application locally during development?

Ans: To run angular 5 applications locally during the development ngserver command is used. ngserver -p aPortNumber is used to start the development on a specific port. 

5. What an Angular 5 component made of and how do you generate new components in Angular 5?

Ans: Angular 5 component is made of component definition and component decorator of a class. To generate a new component in angular 5, use ng generates component component_name command.

6. How do we import a module in Angular 5?

Ans: Below syntax is used to import a module in Angular5.

import { ModuleName } from 'someWhere';

7. Explain $event in Angular 5?

Ans: $event is a reserved keyword that provides the data emitted by an event. It is used as a parameter for event-based methods. 

8. Why double curly brackets are used in Angular 5?

Ans: In Angular 5, double curly brackets are used for data interpolation.

9. Explain the logic of Event Emitters and how Angular 5 makes it work?

Ans: Event Emitter is one of the classes using to emit custom events.

@output() something changed = new EventEmitter();

10. Explain with example @Input and @Output in Angular 5?

Ans:

@Input(alias): here alias is the component name that needs binding.

Same as @Output (alias). 

Angular 4 Interview Questions

Here is the list of most frequently asked TOP 10 Angular 4 Interview Questions and Answers that are useful for both freshers and experienced.

1. Explain component decorators in Angular4?

Ans: A decorator is an essential concept when developing an angular framework with the angular4. In Angular4 decorators are used to compile the code and also used comprehensively. There are four different types of decorators. 

• Class decorator
• Property decorator
• Method decorator
• Parameter decorator

A decorator is a function that is invoked with a prefixed “@” symbol and is immediately followed by property, parameter, methods, and class. A decorator returns the same thing which was given as input but in an augmented form. 

2. What is the isolated unit test in Angular 4?

Ans: The process of conducting tests on the class or component of the angular in an isolated way, rather than creating dependency in between the components is called isolated unit test. In isolated testing, every component and unit is tested under isolation.

3. Explain about pure function in Angular4? 

Ans: Pure functions do not change the assigned value and produce the exact output, after assigning the same value multiple times.

4. Write the CLI command to generate a component in Angular4?

Ans: Components are simple classes that are declared as components with the help of component decorators. It becomes easy to create an application that already works, with the help of angular CLI commands. “Ng generate” is used to generate components, routes, services, and pipes. Simple test shells are also created with the help of this CLI command.

For generating a component in angular4 with the help of CLI command, you need to follow the following syntax-

ng generate component component_name;

It generates the component and adds the component to module declarations.

5. Explain the component directory structure of Angular4?

Ans: The following are the component directory structure of Angular4:

• Module.ts: Angular module is declared and @NgModule decorator is used which initializes the different aspects of angular applications. 
• components.ts: It defines app-root sector and components in angular. A tiny attribute is also declared in the component. 
• component.html: it is the template file of the application which represents the visual part of our components. 

6. Explain ngFor directive with an example?

Ans: The ngFor directive instantiates a template for every element of the given iterator. The different local variables of the ngFor directive can be used in iterations. The ngFor directive can even be used with the HTML elements.

It also performs various changes in DOM. Several exported values can be aliased to local variables with the help of ngFor directive. It allows us to build data presentation lists and tables in our HTML templates. Here’s an example of ngFor directive with the help of HTML:

<tr *ngFor="hero of heroes">

<td>({hero.name})</td></tr>

7. What do you understand by isolated unit tests?

Ans: Unit testing is all about testing the individual units of code. 

As the name implies, the unit test is all about testing individual units of code. In order to answer some questions, isolating the unit of code under the test is really important. When we do this, we are not forced into creating related pieces such as DOM elements for sorting.

With the help of isolated unit tests, it becomes easier to implement everything. To simulate the requests, dependency injections are also provided. The individual sort function can be tested in isolation. And not only the sort function, but any function can also be tested in isolation.

8. What are the DSL animation functions in AngularJs? List them?

Ans: DSL Animation functions are used for crafting animations in Angular js. Below are list of DSL Animation functions in angular js.

• group()
• state()
• transition()
• style()
• keyframes()
• trigger()
• sequence()
• animate()

9. How to include an external CSS in angular4?

Ans: To include external CSS in Angular 4, open your .angular-cli.json and add your CSS file path in the styles array.

10. How angular4 is different from angular2? 

Ans:

• Angular 4 is much faster and smaller than Angular 2.
• The size of the View Engine is reduced in Angular 4.
• New ngTemplate directive is introduced.
• Coding Improvements in *ngIf and *ngFor directives are performed.
• NgIf directive with Else is introduced for better UI handling.
• New Pipes like title case is introduced.
• Meta Tags services are added.
• Improvement in Angular Router.

Angular 2 Interview Questions

These were the most important TOP 15 Angular 2 Interview questions and answers which were asked in many interviews.

1. What is Angular 2?

Ans: Angular2 is an entirely revived component-based javascript framework in which an application is coupled with the components. Angular2 is an advanced version of AngularJs and it is a more “all in one” framework so it also helps in creating the websites without struggling with the different AngularJs frameworks. 

Angular2 is a modular framework in which our code is partitioned into specific procedures that provide similar functionalities, hence it improves the up-gradation, testing, and maintaining the application. It has plenty of useful features including cross-platform, server-side rendering, and supports many languages than other frameworks.

2. What are the new features in Angular 2?

Ans: Angular2 is a platform that encloses a wide range of competencies. The following are some of the features that are added to Angular2. 

• Modular: To get better performance, various modules are removed from angular’s core.
• Data-binding: In angular2 data binding has been improved. To bind the DOM element property, you just wrap it into the square brackets. Eg: <img[src]='product.image' />
• Modern: Angular2 is targeted to modern browsers in which various hacks that make angular harder to develop have been removed. 
• Mobile toolkit: To develop high performance in mobile applications, Angular2 provides a mobile toolkit and techniques. The web applications which are built using a mobile toolkit can be loaded on any device without or with an internet connection, which is a great advantage.
• A command-line interface: With the help of commands it can generate a route, pipes, components, and services.
• Universal server rendering: It is a prominent feature of Angular2. It is a library that is used to develop universal applications as a smoothen experience. 

3. What are the key components in Angular 2?

Ans: Angular2 components are: 

• Modules: An application is broken down into several pieces of code. Each piece is called a module. These modules are created to perform certain specific jobs.
• Components: Components are used to build a module.
• Meta Data: It is used to add extra data to the JavaScript class.
• Templates: It is used to specify the views of applications in JavaScript.
• Service: These are used to create components.

4. How to declare the components in Angular 2?

Ans: In Angular2 components are directives that are allied with a template. Components have a well-defined lifecycle, so you can utilize interfaces that allow you to implement functionality for different times in a component's lifecycle.

A component must be NgModule in order to usable by an application or another component. Components can control their run time behavior by using lifecycle hooks. 

Declaration of component: 

@component ({selector: 'great', template: 'hello {{name}}!'})

Class greet{

Name: string = 'world';

}

5. What are the directives in Angular 2?

Ans: A directive is an element that is used to customize HTML code. The important directives in Angular 2 are:

• ngIF-  If it is true then the elements are added to the HTML code, either elements are not added to the code.
• ngFOR- It is used to get a temporary variable from the variable list.

6. How to handle errors in Angular 2?

Ans: Errors handling feature is available in Angular2 applications. The errors that occurred in the application can be handled by the React JS catch library and also by using the catch function.

7. How Angular 2 is better than Angular 1?

Ans: Angular2 is a rewrite version of Angular1. It is not an updated version of angular1. Angular 2 is an extensible version when compared to Angular1. We have listed some features which are different in Angular2 from Angular 1.

Angular 2	Angular 1
It is a mobile development framework	It is not suited for mobile development
In Angular2 there are more language options and we can write code in ES6, ES5, Dart, and Typewriter.	In Angular1 we can write by using ES6, ES5, and Dart.
Angular2 is an extensible framework and it is completely component-based.	It is a controller-based framework.

 

8. List the difference between Angular 2 components and directives?

Ans: There are certain differences between the components and directives in angular2. They are: 

Component	Directive
A component is a directive with a view.	A directive is a decorator without a view.
Components are the specific type of directive that allows you to utilize the web component functionality throughout the application.	The directive is the mechanism by which we attach behavior to the elements.
It divides the application into smaller components.	It is used to design reusable components.
Components define  pipes	Directives cannot define pipes.
A component can be present per DOM element.	A directive is used to add behavior to the existing DOM element.

 

9. What is ECMAScript?

Ans: ECMAScript stands for European Computer Manufacturer’s Association and it is a standard for scripting languages. It is a subset of Javascript. Javascript and Actionscript use ECMAScript as their core language.

Developers commonly use ECMAScript for client-side scripting on the world wide web and also it is used for server services and applications. ECMAScript includes dynamic, functional, prototype, and structured features.

10. What is a Traceur Compiler?

Ans: Traceur compiler takes generators, classes, and other features from ECMAScript and compiles it into the JavaScript ES5 that runs on the browser. This means developers can utilize the code from the updated version which has more features and design patterns. 

11. How to convert a string into currency?

Ans: To convert a string input into a currency type we use a currency filter in Angular 2.

Here is an example of adding a currency filter by using pipe character to the expression

<div>

The currency of this expression is{{ new value/  currency}}

<div>

12. Explain hidden properties in Angular 2?

Ans: Hidden property is one of the special case properties in angular 2. It is used to bind elements from one property to another property. It can set the display property to none.

13. Is there any chance to port Angular 1 code to Angular 2?

Ans: There is no such chance of porting the code from Angular1 to Angular2. Till there is no port code. As they are different frameworks, they require some approaches.

14. When to use Ngoninit and constructor in Angular 2?

Ans: Constructors are used for dependency injection and for initializing class members. Ngonlnit is used for initialization work. Constructor and Ngonlnit methods are called when the component is created.  It is essential to know when to use the methods. These methods are used to provide the best structures for your component’s code.

A constructor method is a predefined method in the constructor class which is called when the class is instantiated and also used for initializing the fields.  In Angular2 constructors are used to create an instance of the class. When we implement the constructor to use in the class then import the Ngonlnit class.

15. How to cache observable data in Angular 2?

Ans: Caching of observable data is done with the help of “observable.cache”. We can use caching in order to cache the response in the memory and then, on the next subscription, instead of requesting the remote server again. This operator is used at the end of the string.

Caching is important for performance, especially on bandwidth-restricted devices and slow networks. You should have a good understanding of caching while working with promises but while translating it to observable, it is a bit difficult.

Therefore, when interacting with observables, we typically set up a subscription on the consumer side and react to values coming through the pipe. We can easily add caching to the observables by adding publishReplay(1) and refCount.

AngularJS Interview Questions for Freshers and Experienced

1. What is AngularJs?

Ans: AngularJs is an open-source JavaScript framework that helps to build high scale and extensible web applications. It works with HTML and JavaScript. All the components can be mentioned clearly in the applications using HTML. It is best for single web page applications. It is used in the combination of HTML UI elements with JavaScript objects.

2. What is the Angular framework?

Ans: Angular is a typescript and an open-source web application that is maintained by Google and a community of individuals. It provides a platform to develop web-based applications. Angular integrates a range of features like dependency injection, declarative templates, end-to-end tooling, and various other features that helps to smoothen the development path.  

3. List out the difference between Angular and AngularJS? 

Ans:

AngularJS	Angular
AngularJs architecture is based on	Angular architecture is based on
MVC architecture.	Service/Controller.
It uses JavaScript to build the application.	It uses TypeScript to build the application.
It is purely based on the “Scope” or “Controller” concept.	It is based on hierarchy components.
It is not a mobile-friendly framework.	It is a mobile-friendly framework.
It is difficult to create SEO-friendly application development.	It is easy to create SEO-friendly application development.
In AngularJS, code can be written by using ES5, ES6, and Dart.	In Angular, code can be written by using ES5, ES6, TypeScript.
AngularJS works on the client-side like HTML/javascript.	Angular 2 works on the server-side and client-side.
It initializes the application by using ng-app and bootstrap functions.	Angular initializes the application by using a bootstrap module() function.
Specific ng required for an event and the image/property	Uses [] for property binding and () to bind an event.
It doesn’t support the dependency injection concept.	It supports the hierarchy dependency injection
For routing config $routeprovider.when() is used	For routing config @RouteConfig{(…)} is used

 

4. What are the key features of AngularJS?

Ans: AngularJs is completely free and open-source, hence used by many developers around the world. AngularJS is a highly extensible JavaScript framework, which creates strong web applications. It helps to enable HTML as a template language and AngularJS handles the code for each application written on the web page. It enables the developer to create high performable applications over the internet.

5. What is meant by Scope?

Ans: Scope means an application model in AngularJs. It acts as an interface between views and application controllers. These scopes are arranged sequentially and reflect DOM(Document Object Model).

6. Can you explain the concept of scope hierarchy in Angular?

Ans: In Angular, $scope objects are organized into a hierarchy, and they are majorly used by the views. It contains the root scope, and every root scope has one or more child scopes. Each view has its own $scope so that variables set by its view controller will remain invisible to other controllers. Generally, the scope hierarchy looks as below. 

Root $scope

$scope for Controller 1

$scope for Controller 2

..

$scope for Controller ‘n’

7. What is the difference between scope and $scope?

Ans: In Angular,$scope is used for implementing the concept of dependency injection (D.I); on the other hand, the Scope is used for directive linking.

$scope is provided by $scopeProvider, which can be injected into controllers, directives, or other services, whereas Scope can be anything such as a function parameter name, etc.

8. What is meant by services in AngularJs?

Ans: Services are the singleton functions and objects in Angular Js which are used to carry out specific tasks. These are logical and the functions of services can be called controllers, filters, and directives.

9. What are the directives and mention some of the important types of directives?

Ans: AngularJs extend the HTML with new attributes to create directives. Angularjs has a set of built-in directives that provide functionalities to your applications. It allows you to create directives to develop your applications. These are the distinctive attributes with ng-prefix, that notifies the AngularJs compiler to attach a specified behavior to that DOM element. 

The following are the AngularJs built-in directives:

• ngBind
• ngModel
• ngClass

In this article, you’ll learn more about the most important built-in directives in Angular, which helps you to create an angularJs application.

• ngBind: It is used to bind the variable values/models to angular js application and also controls the HTML tag attributes like and more, but it does not support two-way binding. Using ngBind, you can see the output of the model values.
• ngModel: This directive is used to bind the model values in the angularJs application. It provides two-way data binding with the model value, and in some cases, it is used for data-binding.
• ngClass: This directive allows you to set CSS classes on an HTML element by data binding an expression that demonstrates all classes to be added.

10. What is TypeScript?

Ans: Typescript is an open-source programming language led by Microsoft, and it is a structural superset that adds optional classes, types, and many other features. The typescript compiler is itself written the code in the typescript and compiled in the Javascript.

It is used to develop Javascript applications for both client-side and server-side execution. Typescript is a primary language for angular apps development, and you can install it globally by using the following syntax: 

• npm install -g typescript

Let’s look at an example. 

function greeter(Name: string) 
{
    return "Hai, " + Name;
}
let user = "Suneel";
document.body.innerHTML = greeter(user);

AngularJS Basic Interview Questions

11. What are the building blocks of Angular?

Ans: The main building blocks of Angular are modules, components, templates, metadata, data binding, directives, services, and dependency injection.

12. What are the advantages of Angular?

Ans: The following are the advantages of Angular:

• It supports the data-binding capability to HTML. It provides a rich and responsive experience to the users. 
• It provides the capability to create single-page applications effectively. 
• Supports angular and static templates
• It allows both server and client-side communication 
• It has custom directives
• Support dependency injection
• AngularJs code is unit-testable
• It has a wide range of features like Animations, Event handlers, Annotations, etc.

13. Where can we implement DOM in AngularJS?

Ans: AngularJs DOM manipulation is performed in controllers, directives, and services.

14. Define the ng-content Directive?

Ans: Html tags have some content between the tags, for example 

<p> Hai! Welcome! </p>

Now, consider the following instance of having the custom text between the angular tags

<app-work> this tag doesn’t work like HTML tag until you use ng-content directive </app-work>

15. What are Angular expressions?

Ans: Angular expressions are used to bind the application data to HTML. It displays the data exactly at the place where the expression is placed. The expression can be written inside double braces: {{expression}}

16. Explain the various features of Angular?

Ans: Data Binding: It synchronizes the data between the model and view components. 

• Controllers: It is a javascript function that specifies the scope and the primary component of Javascript. It helps to carry out functions to operate views and data. 
• Scope: These are the objects that are referred to as the model. They act as a glue between view and controller. 
• Services: AngularJs has several built-in services like $http to make XMLHttpRequests. These services are singleton objects 
• Filters: Filters select a subset of items from an array and return a new array. 
• Directives: Directives are markers on DOM elements such as attributes, CSS, elements, and more. Using these elements, users can create custom HTML tags that serve as new custom widgets. AngularJs comes with several built-in directives such as ngModel, ngBind, etc. 
• Templates: It views the information from the controller and model. This can be single or multiple views on one page using partials. 
• Routing: It switches the views. 
• MVC: It is a design pattern for dividing an application into different parts called model, view, and controller; each part has its distinct responsibilities.

17. Discuss the disadvantages of using Angular?

Ans: Due to Javascript Angular has few limitations. The following are the limitations: 

• Less Secure:  Angular is a Javascript framework, it does not provide proper authentication and authorization to the users.
• Javascript Dependent: AngularJs does not work if the end-user disables the javascript. 
• No specific path: AngularJs have multiple ways to do the same task. Hence, it is difficult for programmers to predict which is the best way to perform certain tasks. 
• Lagging UI: More watches can degrade the performance of the application. 
• Name Clashes: If you create more ng-apps on a single page, it may lead to cause name clashes. 

AngularJs does not support Internet Explorer 8.0.

18. What is a SPA (Single Page Application) in Angular? 

Ans: A single-page application is a website or a web application that interacts with the users dynamically. It rewrites the current page instead of loading the entire page from the server. 

19. Explain Angular Authentication and Authorization?

Ans:

Authentication: Authenticate API verifies, user login credentials that are present in the server. After completion of the validation, it returns JWT (JSON Web Token) to the users. The JWT token has current user information and it identifies the users. This is called authentication. 

Authorization: Every user has a different level of resource access. While some users have access to all the resources, others may have access to a few files or resources. This is called authorization. 

In order to build authentication, on the client we need to build the login page and on the server, we should build an API endpoint to validate the user. When the user clicks on the login button.

20. Explain what is the difference between Angular and backbone.js?

Feature	AngularJs	Backbone.Js
Definition	AngularJs is an open-source framework based on a front-end web application	BackboneJs is a lightweight javascript with RestFul JSON interface, and it offers a framework based on MVC
Performance	It provides intense performance for big/large pages as it processes the two-way data binding.	It also provides more impactful performance than AngularJs for small pages, but for large pages, it is not preferred as it does not offer any data binding.
Architecture	It works on MVC	It works on MVP
	architecture and it uses two-way data binding to lead the application activity.	architecture, and it does not provide any data binding process to drive the application activity.
Templating	To understand the application at the function level, AngularJs offers templating through the dynamic HTML attributes which are added to the document.	BackboneJs provides an underscore template that is not fully featured as angularJs templates.
Testing	It prefers unit testing for large applications.	It prefers swift testing for small or single-page applications.
Support	AnuglarJs has extensive documentation libraries and large community support.	BackboneJs also have great community support.
Complexity	AngularJs is a bit complex than BackboneJs because it implements two-way data binding.	BackboneJs is simple because it does not provide data binding.

 

21. How do Observables differ from Promises?

Ans:

• Observable is lazy, where the promise is easy
• Observable can be either synchronous or asynchronous, where the promise is always asynchronous.
• Observable can handle a stream of values (from zero to multiple values), where the promise can handle a single event. 
• A call back is made for each event in the observable. 

22. What are the Routes in AngularJS?

Ans: Routes in AngularJS helps to create different URLs for different contents in the applications. This enables the user to bookmark a specified content that is needed. This bookmarked URL is called Route.

23. Define value in Angular?

Ans: Value refers to a simple object, it may be a number, character, and string. The value should always belong to a model and these are injected into controllers, factories, and services. Adding value to the controller is possible by assigning parameters with the same name as the value.

24. What are the linking functions and types of linking functions?

Ans: A linking function links the directives with the scope to produce a view. To register and update DOM handlers, the linking functions are very important. There are two types of linking functions, they are:

Pre-linking functions: This function is executed before the process of child elements linking. Here we can’t transform the DOM.

Post-linking functions: This function is executed after the linking process of child elements. In these functions, the transformation of DOM is done safely. 

AngularJS Intermediate Interview Questions

25. What are templates in Angular?

Ans: Templates in AngularJs are an HTML file that is enriched or filled with the AngularJs stuff like directives and attributes. A directive is an essential element that is used to specify a particular class or attribute to know its behavior according to the user's needs.

The controller and model in angular are combined with the templates to handle the user views. Angular templates can also include Form controls, Expressions, CSS, and Filters. 

26. What is string interpolation in Angular?

Ans: In angular, string interpolation is a syntax that uses to display the component data on the HTML template at the end-user. It facilitates you to fetch the data from the Html template file and also to make changes on the component.ts file. It is represented with the double curly braces ({{ }} ).

27. What is the difference between an Annotation and a Decorator in Angular?

Ans: In angular, annotations are the only metadata set of classes using the reflect metadata library and use to create the annotation array. On the other hand, decorators are also called design patterns and it is used for separating modifications or decorations of the classes without changing the original source code.

28. What is a provider in Angular?

Ans: The provider is a unique and critical feature of Angular. It is an instruction to the dependency injection system and provides the data to obtain values for the dependency. A provider is an object that has a $get method to create a new instance service. To register new providers it uses the $provide method and other additionals methods.

29. Does Angular support nested controllers?

Ans: Yes, angular support nested controllers concept. Nested controllers are needed to demonstrate the hierarchy manner for using it in the view. 

30. Explain the differences between Angular and jQuery?

Ans: Below are the major difference between jQuery and Angular :

Angular	JQuery
AngularJs is tough to understand	Jquery is easy to understand.
AngularJs support two-way binding	Jquery does not support any data binding process
Angular support deep linking routing	Jquery does not support deep linking routing
In angular components are the building blocks for UI in the application	Jquery components are Jquery UI which are a set of effects, user interface, themes, and widgets on

 

31. What is dependency injection in AngularJS?

Ans: In AngularJS, the dependency injection is a software mechanism in which the components are given their dependencies instead of hard codes. It helps in maintaining a component as reusable and extensible. It provides key components like value, service, constant, provider, and factory in which the dependencies are injected from one to the other.

32. What is Angular Material?

Ans: Angular Material is a UI component library that helps to build an attractive functional web application, consistent, and web pages while sticking to the web design principles like device independence, graceful degradation, and browser portability. It helps in creating wonderful, responsive, and attractive websites.

33. What is the AOT (Ahead-Of-Time) Compilation?

Ans: Angular ahead of time AOT compiler converts your typescript code and angular Html into the javascript code during the build phase before the browser download and runs the code. Before developing the process, compile your application; it provides a faster rendering in the browser. 

34. What is Data Binding? How many ways it can be done? 

Ans: Data binding is a powerful and essential feature in any software development language. It allows us to demonstrate communication between view and component. The following are the different types of data binding:

• Event binding: It is defined as sending/updating the information of certain variables from view to the component. 
• Property binding: It is defined as updating the information/values of a certain variable from component to view. 
• Two-way binding: It is a combination of event and property binding. It defined as updating the values or information from components to view and from view to the component. 

35. Differentiate between one-way binding and two-way data binding? 

Ans:

One-way data-binding: 

• In one-way data-binding, the UI or view part does not update systematically whenever the data model changes. To update the changes, you need to write the custom code.
• The data flow only from objects to UI, not vice-versa. 

Two-way data-binding: 

• In two-way binding, the UI or view part is updated automatically whenever the data model changes. Unlike one-way binding, two-way data-binding is a synchronization process.
• The data flow between the object to UI and vice-versa. 

36. Explain the digest cycle in Angular?

Ans: The digest cycle in angular triggers the values when the model or view changed and the cycle sets off the watchers to match the new values. The digest cycle automatically runs the code when the code encounters the directives.

The scope of the digest cycle is limited to the AngularJs context. $apply() or $digest() is required to synchronize the changes in the model and view that happen outside the angular framework.

37. Could you explain the various types of filters in Angular?

Ans: Angular filters allow us to format the data in order to display the data on UI without changing the original format of the data. It is possible to add these filters to directives, templates, controllers, and services. Filters can be used with the directives or expressions using pipe symbol(|)

• Syntax:

   {{expression | filterName:parameter }}

Various types of filter are enumerated as follows

Number	Formats numeric data as text with comma and fraction.
Currency	Formats numeric data into specified currency format and fraction.
Date	Formats date to a string in the specified format.
Uppercase	Converts string to uppercase.
Lowercase	Converts string to lowercase.
Filter	Filters an array based on specified criteria and returns a new array.
orderBy	Sorts an array based on specified predicate expression.
Json	Converts JavaScript object into a JSON string
limitTo	Returns a new array containing a specified number of elements from an existing array.

38. What is ngOnInit ()? How to define it?

Ans: ngOnInit () is a lifecycle hook that is called after completion of initializing all data-bound properties of a directive. It is defined as:

Interface OnInit

 {

   ngOnInit () : void

}

39. What is the code for creating a decorator?

Ans:  

unction Dummy(target) {
 dummy.log('This decorator is Dummy', target);
 }

40. What is the process to convert TypeScript code into JavaScript code?

Ans: The Typescript code is not understandable by the browsers. So, the typescript code is compiled and translated into the javascript code; this process is called trans-piled.

41. What is ViewEncapsulation and how many ways are there to do it in Angular?

Ans: ViewEncapsulation identifies the component styles and demonstrates whether the particular component will affect the entire application or not. It also enables us to use the DOM shadow. Angular provides 3 types of ViewEncapsulation.

• ViewEncapsulation.none: It defines the component style that is visible to all components of the application.
• ViewEncapsulation.emulated: Styles are used in other HTML, spread the components.
• ViewEncapsulation.native: Styles are used in other HTML but do not spread the components.

42. Why prioritize TypeScript over JavaScript in Angular?

Ans: Typescript gains much popularity in recent years. It is a superset of Javascript. The issue with the javascript is, it does not support OOP language and does not follow proper prototype patterns. In Javascript, it is a tough task to handle the errors in the code, but in typescript, it is easy for the team to handle the errors. 

43. What is a template?

Ans: the view that a user sees in the browser.

44. How to perform animation in Angular?

Ans: To implement the animation in an angular application, a user needs to include an angular library known as Animate Library. Then you must refer ngAnimate module in your application or add if your application has a name, add ngAnimate as a dependency inside your application module.

Angular library:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app=”ngAnimate”>

AngularJS Advanced Interview Questions

45. What is transclusion in Angular?

Ans: The transclusion in Angular allows you to shift the original children of a directive into a specific location within a new template. The ng directive indicates the insertion point for a transcluded DOM of the nearest parent directive that is using transclusion. Attribute directives like ng-transclude or ng-transclude-slot are mainly used for transclusion.

46. What is a module?

Ans: In angular, a module is a process to group directives, pipes, services, and components that are related, in such a way that they can blend with other modules to create an application. 

Instance: 

 app.module.ts root module declared with @NgModule decorator as below,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

47. What lifecycle hooks are available in Angular?

Ans: Angular has a lifecycle from initialization to the end of the application. The following are the lifecycle hooks of angular. 

Hook	Purpose and Timing
ngOnChanges()	This method accepts a SimpleChanges() object of previous and current property values and retorts when Angular resets the data-bound input properties — called before ngOnInit() more than one data-bound input properties change.
ngOnInit()	This method initializes the components after angular displays the data-bound properties and sets the component's input properties. Called ngOnchanges() method.
ngDoCheck()	This method identifies and acts upon the changes that Angular can’t detect on its own. This method called during the changes and after ngOnchanges() and ngOnInit() methods.
ngAfterContentInit()	This method addressed the Angular external content projects and called after the ngDoCheck() method.
ngAfterContentChecked()	This method responds after Angular checks the projected content into the components. And it is also called after the ngAfterContentInit() method and every subsequent ngDoCheck() methods.
ngAfterViewInit()	This method responds after Angular initialized the child's views that are in directives. It is called after ngAfterContentChecked() method.
ngAfterViewChecked()	This method also checks the component’s view that is in the directives. It is called after ngAfterContentChecked() method.
ngOnDestroy()	This method cleans the data before Angular

 

48. What is metadata?

Ans: Angular metadata is used to decorate a class that demonstrates the expected behavior of the class. The following are various parts of the metadata. 

1. Class decorator: @NgModule and @Component

Instance:

import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<div>Class decorator</div>',
})
export class MyComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}

@NgModule({
  imports: [],
  declarations: [],
})
export class MyModule {
  constructor() {
    console.log('Hey I am a module!');
  }
}
?

2. Method decorators: It is used for methods inside the classes. Eg: @HostListner.

Instance:

import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'my-component',
    template: '<div>Method decorator</div>'
})
export class MyComponent {
    @HostListener('click', ['$event'])
    onHostClick(event: Event) {
        // clicked, `event` available
    }
}

3. Parameter decorators: It is used for parameters inside the class constructors, eg- @Inject. 

Instance:

import { Component, Inject } from '@angular/core';
import { MyService } from './my-service';

@Component({
    selector: 'my-component',
    template: '<div>Parameter decorator</div>'
})
export class MyComponent {
    constructor(@Inject(MyService) myService) {
        console.log(myService); // MyService
    }
}

4. Property decorators: It is used for properties inside the classes, eg- @Inside, @Outside. 

Instance:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'my-component',
    template: '<div>Property decorator</div>'
})

export class MyComponent {
    @Input()
    title: string;
}

49. What is Angular CLI?

Ans: Angular CLI is known as the command line interface tool, which is used to build, initialize, and maintain the Angular apps. This CLI tool can be used through an interactive UI such as Angular Console or directly through a command shell. 

50. What are pipes in AngularJs?

Ans: In angular, pipes are a simple way to transform the data. It takes the values like integers, arrays, strings, and data as input and divided with pipe(|) symbol to convert the data in the required format, and it displays the same in the browser. In angular, there are some in-built pipes, but you can also develop your own pipes. 

Instance: 

The below code clearly shows you the difference. 

Save the following code as app.component.html

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Hai Mindmajix!';
}

The following lines of code go into the app.component.html file.

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

51. What is a parameterized pipe?

Ans: In angular, pipes can take multiple parameters to tune the fine output.  The parameterized pipe can develop by declaring the pipe with colon(:) and then parameter values. Users can declare multiple parameter values by separating each value with the colon(:).

Let’s quickly build a simple pipe example to see its action. 

{{today | date:'MM-dd-yyyy' }}

In the below code there are multiple parameter values, that are separated from the colons.

{{salary | currency:'USD':true}}

Output: $420

52. What is the chaining pipe in Angular?

Ans: A chaining pipe is used to perform multiple functions within a single expression. Each parameter is divided with the pipe (|) symbol. 

Instance:

The chained hero's birthday is

{{ birthday | date | uppercase}}

It displays the data as FRIDAY, APRIL 15, 2019

In the same way, we can give multiple values to the parameters as shown in the below code.

The chained hero's birthday is

{{  birthday | date:'fullDate: yy/mm/dd' | uppercase}}

Now, it displays the data as FRIDAY, 19/04/15

53. What is a custom pipe?

Ans: In angular, you can create reusable pipes to transform the values. The following code is an example of custom pipes.

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

54. What do you understand by REST in Angular?

Ans: REST stands for REpresentational State Transfer. Rest is an API(Application program interface) style that works on the HTTP request. The requested url identifies the data that need to proceed.

55. What is meant by Angular Global APIs?

Ans: Angular Global API is a combination of global JavaScript functions for performing various common tasks like:

• Comparing objects
• Iterating objects
• Converting data

There are some common Angular Global API functions like:

• angular. lowercase: Converts a string to a lowercase string.
• angular. uppercase: Converts a string to an uppercase string.
• angular. isString: Returns true if the current reference is a string.
• angular. isNumber: Returns true if the current reference is a number.

56. Describe how will you set, get, and clear cookies, in Angular?

Ans: For using cookies in Angular, you need to include a  module called ngCookies angular-cookies.js.

To set Cookies: For setting the cookies in a key-value format ‘put’ method is used.

{{  birthday | date:'fullDate: yy/mm/dd' | uppercase}}

To get Cookies: For retrieving the cookies ‘get’ method is used.

cookie.get(‘nameOfCookie’);

To clear Cookies: For removing cookies ‘remove’ method is used.

cookie.delete(‘nameOfCookie’);

57. What is the difference between pure and impure pipes in angular?

Ans: Pure pipe detects the change in the value or parameters that passed through a pipe symbol. For example, any changes made in the input values like strings, integers, booleans or in the object reference like array, function, objects. 

Impure pipe detects every change in the expression whether it is parameter or value, it also detects the changes in the keystroke and mouse-move.

58. What are the differences between the factory service methods in AngularJs?

Ans: In a factory method, first, a factory of objects is defined and then methods are implied to those factories, whereas in the service method, the services are created to define a specific task.

59. Explain about Routing?

Ans: Routing is a process of merging views. The controller decides which view should be merged based on the logical need.

60. Explain the AngularJs boot process?

Ans: When a page has loaded in the browser, the following process takes place:

• An HTML document of the page is loaded and evaluated by the web browser. A Javascript file is loaded and the global object is created. Later controller functions are executed, which are registered by Javascript.
• Here Javascript scans views and apps through HTML, once the view is scanned, then it is connected with the controller function.
• Then AngularJs shows the controller functions with views and data handled by the controller. Finally, the page gets ready.

Conclusion

We tried to cover all the important questions and hope that this article has helped you to understand the Angular interview questions from basics to advanced level.

This list of Angular interview questions and answers will help you to clear any Angular interview confidently and successfully. 

Please comment us in the below section if we missed any Angular Questions that you faced in the interview. Our team will help you to know the answer.