Angular Interview Questions | Eklavya Online

Angular Interview Questions

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.

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.

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.

AngularJS is a JavaScript framework which is added to the HTML with 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.

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

 

  • {{ user }}

 

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

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

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.

The most important features of AngularJS are:

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

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.

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.

This is a paragraph

. Now, see the following example of having custom text between angular tags:

This won’t work like HTML until you use ng-content Directive

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.

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.

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.

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.

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:

ng generate component component_name
Or
ng g c component_name

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.

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.

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

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}},

{{username}}, welcome to Angular

The below JavaScript expressions are prohibited in template expression.

assignments (=, +=, -=, …)
new
chaining expressions with ; or ,
increment and decrement operators (++ and –)

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.

npm install @angular/cli@latest
To create an application:

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

Syntax:

ng new application_name
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:

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

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.

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.