Angular Interview Questions and Answer

Angular Interview Questions and Answer

A compilation of the most frequently asked questions regarding the role of an Angular developer during the interview. Below, we'll include the queries of all Angular models. AngularJS, Angular 2, Angular 4, Angular 6, Angular 7 and the new release of Angular 8 for example.

1. What is AngularJS?

AngularJS is a JavaScript framework and has a < script > tag attached to the HTML. This is written in JavaScript. This is used with Directives to add HTML attributes and links data with Expressions to HTML. On 20 October 2010 Angular JS was first published by Google and approved under MIT.

2. What are the most important features of AngularJS?

The most important features of AngularJS are:

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

3. What is ng-content directive in Angular?

The ng-content directive is a feature of Angular that helps us make components that can be used again.

For example: Tags are used to compose something in conventional HTML. E.g.

<p>This is a paragraph</p>. Now see the illustration below of having custom text within angular tags:

<app-work> This does not work like HTML until ng-content Directive is used </app-work>

It won't work the same way as HTML element. To make it work much like the illustration above in HTML, we will use the ng-content directive.

4. What is Angular?

Angular is an open-source Web application framework based on TypeScript developed and maintained by Google. It is written in the language TypeScript. Angular provides an easy, powerful, and simple way to create reactive single-page applications. This is a full AngularJS rewrite.

5. What is the difference between AngularJS and Angular?

6. What is MEAN stack development?

MEAN stack is a collection of JavaScript related technologies that are used for web application development. MEAN stands for MongoDB, ExpressJS and AngularJS. It offers technologies focused on clients and servers along with Server, which is why it often named Full-stack development. At this stage, Angular is on the client side, Node.js is a server side JavaScript execution system 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 website that provides users with a very simple and reactive interface like a desktop application. This reloads just the current page, rather than the entire application, which is why it is incredibly fast.

8. What is the difference between Angular and React?

Angular and React all are related to JavaScript but there are a lot of differences between them. Note the key distinctions between Angular and React:

• Angular is a JavaScript framework and React is a JavaScript library.
• Angular is written in TypeScript while React is written in JavaScript.
• Angular is designed and maintained by Google while React is created and maintained by Facebook.
• The first version of Angular was AngularJS was published in 2010 and 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 standard DOM which updates the whole tree structure of HTML tags that's why is is comparatively slow than Angular while React uses virtual DOM which makes it incredible quick. This is the most influential aspect of React.
• Angular offers two-way data binding and React provide one-way data binding.
• Angular is easy to scale whereas React is more modular than Angular.
• Angular is fast when compared to old technologies but React is quicker than Angular.

9. What are directives in Angular?

Within Angular, a directive is a feature that is executed as the Angular compiler finds it in the Angular DOM. For Angular applications, guidelines define how to control components and business logic.

There are mainly three type of directives:

• Component Directives
• Structural Directives
• Attribute Directives

10. What are components in Angular?

The key features of Angular are its components. We are the key elements of an Angular application. Angular components render the application complex into reusable parts which you can quickly reuse.

Components can be easily generated using Angular CLI.

Syntax:

ng generate component component_name    

Or

ng g c component_name  

11. What is Data binding in Angular?

In Angular data binding is an automated data synchronization between the components of the model and view. Two-way data binding is Angular's very common and powerful feature which provides a bridge between the angular apps' view and business logic.

12. What is Angular CLI?

Angular CLI is an angular command line interface. This facilitates the creation of an application and different components.

Install Angular CLI:

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

npm install @angular/cli@latest  

To create an application:

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

Syntax:

ng new application_name  

To create components routes, services and pipes:

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

Syntax:

ng new component_name   

To test your app running locally:

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

Syntax:

ng serve   

13.What is metadata in Angular?

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

14. 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 will 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, when the application loads. It is fantastic but has drawbacks. Views take longer to make because of the in-browser compilation step. App size decreases when it includes angular compiler and other library content it won't really require.

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 make the program automatically, without having to compile the app first. This compilation is better than JIT because of quick rendering, smaller application size, protection and detect template errors earlier.

15. What is AngularJS Expression?

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

Exmple:

<!DOCTYPE html>  
<html>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
<body>  
<div ng-app>  
<p>My first expression: {{ 15 + 5 }}</p>  
</div>  
</body>  
</html>  

16. What is main differences between Angular expression and JavaScript expression?

Angular expressions are like JavaScript expressions but there is a distinction between them because Angular expressions are evaluated against a scope entity whereas JavaScript expressions are evaluated against a global window object.

17. What is the different versions of Angular?

AngularJS was the first Angular version also known as Angular 1. It was released on 20th of October 2010. Google developed a newer version of AngularJS after that version which was a complete rewrite of the previous one. That would have been known as Angular 2. After that it launches Angular 4, Angular 6, Angular 7, and Angular 8. The current version of Angular 8 is.

Angular versions:

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

18.What is a service in Angular?

In Angular, services are used to offer a growing functionality of different modules. A service offers greater modularity for the app by helping you to pull specific features out of components.

Let's see how to build a service which can be used through several components. Here, service name is EgService.

Example:

import { Injectable } from '@angular/core';  
import { Http } from '@angular/http';  
@Injectable({ // The Injectable decorator is required for dependency injection to work  
  // providedIn option registers the service with a specific NgModule  
  providedIn: 'root',  // This declares the service with the root app (AppModule)  
})  
export class EgService{  
  constructor(private http: Http){  
  }  
  fetchAll(){  
  return this.http.get('https://phptpoint.com');  
  }  
}  

19. What is the use of ngIf directive?

Angular ngIf directive is used anytime you choose to show a view or a part of a view even in particular conditions. The Angular ngIf directive is used to attach or delete an entity according to the true / false condition.

Let's take an example to show a message if the consumer age is less than 25,

<p *ngIf="user.age > 25">You are eligible to fill this form</p>.

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

Dependency injection (DI) is a major application design pattern. In DI, a class asks for interconnections from external sources rather than developing them itself. Angular has its own dependency injection framework to fix dependencies. So, your services depend on other services all across your application.

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

Angular ngFor directive is being used in a template to show each item in a list. For instance, here we enumerate over list of users,

<li *ngFor="let user of users">{{ user }}</li>

22. What is interpolation in Angular?

Angular is a simple solution to property binding. It is a special syntax that Angular converts into property binding. Interpolation is expressed by double curved braces({{}}). The text between the curly braces is also the name of a component property. Angular replaces the name with the string meaning of the corresponding part property. Let's take an example,

<h3>  
  {{title}}  
  <img src="{{url}}" style="height:120px">  
</h3>  

23. What are template expressions in Angular?

A template expression provides a meaning similar to any JavaScript expression. Angular executes the expression and assigns it to a property of a binding goal. The goal could be an HTML feature, a component, or a directive. Throughout the property binding, a prototype expression occurs throughout quotes to the right of the = symbol as in [property]="expression”.

<h3>{{username}}, welcome to Phptpoint</h3>

The below JavaScript expressions are prohibited in template expression.

assignments (=, +=, -=, ...)

new

chaining expressions with ; or ,

increment and decrement operators (++ and --)