Top 50 Angular Interview Questions & Answers, Free Interview Questions

Angular Interview Questions

Angular is one of the most promising languages. Rich in feature set, this technology is worth to work hard for. Below is the list of best Angular interview questions and answers. These questions have been divided as per levels - beginner, intermediate and advanced.

1 .

What is Dependency Injection in Angular ?

Dependency Injection (DI) is a software design pattern where the objects are passed as dependencies rather than hard-coding them within the component. The concept of Dependency Injection comes in handy when you are trying to separate the logic of object creation to that of its consumption. The ‘config’ operation makes use of DI that must be configured beforehand while the module gets loaded to retrieve the elements of the application. With this feature, a user can change dependencies as per his requirements.

2 .

What are events in Angular ?

Angular Events are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below :

* ng-click

* ng-copy

* ng-cut

* ng-dblclick

* ng-keydown

* ng-keypress

* ng-keyup

* ng-mousedown

* ng-mouseenter

* ng-mouseleave

* ng-mousemove

* ng-mouseover

* ng-mouseup

* ng-blur

3 .

How to create a service in Angular ?

In Angular, a service is a substitutable object that is wired together using dependency injection. A service is created by registering it in the module it is going to be executed within. There are basically three ways in which you can create an angular service.

* Factory

* Service

* Provider

4 .

What is the difference between a link and compile in Angular ?

Compile : Compile function is used for template DOM Manipulation and to collect all the directives.

Link : Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

5 .

What are Angular Global APIs ?

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 lowercase string.

angular. uppercase : Converts a string to uppercase string.

angular. isString : Returns true if the current reference is a string.

angular. isNumber : Returns true if the current reference is a number.

6 .

What is a service ?

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

Let's create a repoService which can be used across components,

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 RepoService{
  constructor(private http: Http){
  }

  fetchAll(){
    return this.http.get('https://api.github.com/repositories');
  }
}

The above service uses Http service as a dependency.

7 .

What is the purpose of async pipe ?

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.

Let's take a time observable which continuously updates the view for every 2 seconds with the current time.

@Component({
  selector: 'async-observable-pipe',
  template: `<div><code>observable|async</code>:
       Time: {{ time | async }}</div>`
})
export class AsyncObservablePipeComponent {
  time = new Observable(observer =>
    setInterval(() => observer.next(new Date().toString()), 2000)
  );
}

8 .

In Angular, describe how will you set, get and clear cookies ?

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.

cookie.set('nameOfCookie',"cookieValue");

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’);

9 .

What is the purpose of ngFor directive ?

We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users,

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

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

10 .

What is interpolation ?

Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the 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,

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

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.