Angular Interview Questions and Answer

A list of most frequently asked questions during the interview for the role of an Angular developer. Here, we will include the questions of all versions of Angular. For example, AngularJS, Angular 2, Angular 4, Angular 6, Angular 7 and the latest version Angular 8.

1) What is AngularJS?

AngularJS is a JavaScript framework which is added to the HTML with <script> tag. It is written in JavaScript. It is used to extend HTML attributes with Directives, and binds data to HTML with Expressions. Angular JS was first released on October 20, 2010 by Google and licensed under MIT.

Learn more about AngularJS Read More

2) What are the most important features of AngularJS?

The most important features of AngularJS are:

• Model
• View
• Controller
• Directives
• Scope
• Services
• Data Binding
• Filters
• Testable

3) What is Angular?

Angular is a TypeScript-based open-source web application framework developed and maintained by Google. It is written in TypeScript language. Angular provide a simple, easy and powerful way to create a reactive single page applications. It is a complete rewrite of AngularJS.

Learn more about AngularJS Read More

4) What is the different versions of Angular?

AngularJS was the first version of Angular which was also known as Angular 1. It was released on October 20, 2010. After that version, Google developed a newer version of AngularJS which was a complete rewrite of the previous one. That was known as Angular 2. After that Angular 4, Angular 6, Angular 7 and Angular 8 are released. Angular 8 is its current version.

Angular versions:

• AngularJS
• Angular 2
• Angular 4
• Angular 6
• Angular 7
• Angular 8

5) What is the difference between AngularJS and Angular?

A the main differences between Angular JS and Angular are:

6) What is MEAN stack development?

MEAN stack is a collection of JavaScript based technologies which are used to develop web applications. MEAN stands for MongoDB, ExpressJS, AngularJS and Node.js. It provides client and server based technologies along with Database that's why it also called Full-stack development. Here, Angular is for client-side, Node.js is a server side JavaScript execution environment and MongoDB is the database used in the application.

7) What is Single Page Application (SPA)?

A single page application is a web application or a website which provides a very fast and reactive experience to the users like a desktop application. It only reloads the current page rather that the entire application that's why it is extremely fast.

8) What are directives in Angular?

In Angular, a directive is a function which is executed when the Angular compiler finds it in the Angular DOM. Directives specify how to control components and business logic in Angular applications.

There are mainly three type of directives:

• Component Directives
• Structural Directives
• Attribute Directives

Learn more about AngularJS Read More

9) What is ng-content directive in Angular?

The ng-content directive is a feature of Angular which helps us to make reusable components.

For example: In conventional HTML, tags are used to write something. i.e. <p>This is a paragraph</p>. Now, see the following example of having custom text between angular tags:

<app-work>This won't work like HTML until you use ng-content Directive</app-work>

This will not work same as HTML element. To make it work just like the above HTML example, we need to use the ng-content directive.

10) What are components in Angular?

Components are the key features of Angular. They are the main building blocks of an Angular application. Angular components make your complex application into reusable parts which you can reuse very easily.

You can easily create components by using Angular CLI.

Syntax:

Learn more about Angular components: Read More

11) What is Data binding in Angular?

In Angular, data binding is an automatic synchronization of data between the model and view components. Two-way data binding is very popular and powerful feature of Angular which creates a bridge between the view and the business logic of the Angular apps.

12) What is Angular CLI?

Angular CLI is a Command Line Interface for Angular. It facilitates you to create an application and different components.

Install Angular CLI:

To install the latest version of Angular CLI, run the following npm command.

To create an application:

The ng new command is used to create a new application in Angular.

Syntax:

To create components routes, services and pipes:

The ng generate command is used to create a new component, routes, services and pipes in the application.

Syntax:

To test your app running locally:

The ng serve command is used to test your app locally while developing.

Syntax:

13) Sketch a pictorial diagram of Angular Architecture.

Basic building blocks of Angular Architecture

• Modules: Every Angular app has a root module known as AppModule. It provides the bootstrap mechanism to launch the application.
• Components: Every Application has at least one component known as the root component that connects a component hierarchy with the page document object model (DOM).
• Directives: Directives provide program logic and build markup to connect to your data and DOM.
• Data Binding (Property Binding + Event Binding): Event Binding and Property Binding both are used to provide two-way data binding in Angular app.
• Services: A service class is created for a data or logic which isn't associated with a specific view, and you want to share across component.
• Dependency Injection: The dependency injection is used to keep your compound classes lean and efficient.
• Routing: Angular routing is used to define a navigation path among the different application states and view hierarchies in your app.

14) What is metadata in Angular?

In Angular, component and services are simply classes with decorators that mark their type and provide metadata that tells Angular how to use them. So, metadata is used to decorate a class to configure the expected behavior of the class.

15) What is compilation in Angular? What types of compilations are used in Angular?

The Angular applications are written in TypeScript and HTML. Their components and templates must be converted to executable JavaScript by the Angular compiler. There are two types of compilations in Angular:

Just-in-time (JIT) compilation: This is a standard development approach which compiles our Typescript and html files in the browser at runtime, as the application loads. It is great but has disadvantages. Views take longer to render because of the in-browser compilation step. App size increases as it contains angular compiler and other library code that won't actually need.

Ahead-of-time (AOT) compilation: With AOT, the compiler runs at the build time and the browser downloads only the pre compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first. This compilation is better than JIT because of fast rendering, smaller application size, security and detect template errors earlier.

16) What is the difference between Angular and React?

Angular and React both are related to JavaScript but there are a lot of differences between them. See the main differences between Angular and React:

• Angular is a JavaScript framework while React is a JavaScript library.
• Angular is written in TypeScript while React is written in JavaScript.
• Angular is developed and maintained by Google while React is developed and maintained by Facebook.
• The first version of Angular was AngularJS and released in 2010 while the first version of React was released in 2013.
• Angular is a full MVC (Model, View, and Controller) framework while React is a simple JavaScript library. It is just the View model.
• Angular uses regular DOM which updates the entire tree structure of HTML tags that's why is is comparatively slow than Angular while React uses virtual DOM which makes it amazing fast. It is the most prominent feature of React.
• Angular provides two-way data binding while React provide one-way data binding.
• Angular is easy to scale while React is more scalable than Angular.
• Angular is fast as compared to old technologies but React is faster than Angular.

Learn more about Angular vs React: Read More

17) What is AngularJS Expression?

AngularJS expressions are written inside double braces {{ expressions }} or inside a directive: ng-bind="expression". AngularJS expressions are like JavaScript expressions which can contain literals, operators, and variables. For Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

Exmple:

18) What is main differences between Angular expression and JavaScript expression?

Angular expressions are like JavaScript expressions but there is a difference between them as Angular expressions are evaluated against a scope object while JavaScript expressions are evaluated against a global window object.

19) What is a service in Angular?

In Angular, services are used to provide a common functionality to various modules. A service provides better modularity for your app by allowing you to extract common functionality out of components.

Let's see how to create a service which can be used across multiple components. Here, service name is EgService.

Exmple:

The above service uses Http service as a dependency.

20) What is dependency injection (DI) in Angular?

Dependency injection (DI) is an important application design pattern. In DI, a class asks for dependencies from external sources rather than creating them itself. Angular has its own dependency injection framework to resolve dependencies. So, your services depend on other services throughout your application.

21) What is the use of ngFor directive in Angular?

Angular ngFor directive is used in a template to display each item in a list. For example, here we iterate over list of users,

The user variable in the ngFor double-quoted instruction is a template input variable.

22) What is the use of ngIf directive?

Angular ngIf directive is used when you want to display a view or a portion of a view only under specific circumstances. The Angular ngIf directive is used to insert or remove an element according to the true/false condition.

Let's take an example to display a message if the user age is less than 18,

Note: Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in the larger projects with many data bindings.

23) What is interpolation in Angular?

Angular is a convenient alternative to property binding. It is a special syntax that Angular converts into property binding. Interpolation is represented by double curly braces ({{}}). The text between the curly braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property. Let's take an example,

In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.

24) What are template expressions in Angular?

A template expression gives a value similar to any JavaScript expression. Angular executes the expression and assigns it to a property of a binding target. The target might be an HTML element, a component, or a directive. In the property binding, a template expression appears in quotes to the right of the = symbol as in [property]="expression". In interpolation syntax, the template expression is surrounded by double curly braces. For example, in the below interpolation, the template expression is {{username}},

The below JavaScript expressions are prohibited in template expression.