Are you looking to change your job as an Angular developer? Then you need to prepare top 2020 Angular Interview questions.

Browse top 100+ Angular Interview Questions and become familiar with the answers prepared by our industry experts. Our Angular Interview Questions 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 Angular interview question and answers that are frequently asked in interviews. 

Frequently Asked Angular Interview Questions 

Our advisors segregated Frequently asked Angular Interview Questions into 3 sections as below.

Angular Basic Interview Questions

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 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 boostrapmodule() 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 the Angular, which helps you to create angularJs application.

ngBind: It is used to bind the variable values/models to angularjs application and also controls the HTML tag attributes like 

</span>, </p>

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

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

this tag doesn’t work like HTML tag until you use ng-content directive

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 which 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 web site 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 resources access. While some users have access to all the resources, others may have access to the 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?

Ans: 

Feature AngularJs Backbone.Js
Definition AngularJs is an open-source framework based on 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 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 which 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. 
  AngularJs is a bit complex than BackboneJs because it implements two-way data binding. BackboneJs is simple because it does not provide data binding.

Angular Intermediate Interview Question and Answers:

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 which 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 to 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. 

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 behaviour according to the user 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. 

----- Related Page: Full Stack Developer Interview Questions -----

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 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: 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 $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: 

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 set of effects, user interface, themes, and widgets on
  the top of the Jquery javascript libraries.

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 run 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? 

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 flows 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 model and view that happen outside the angular framework.

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

Ans: Angular filters allows 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 a 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 new array containing 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);
 }

Angular Advanced Interview Questions:

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?

Subscribe to our youtube channel to get new updates..!

Ans:  ViewEncapsulation identifies the component styles and demonstrate that 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 does 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: 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 into your application or add if your application has 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”>

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 components 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 the 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
  wrecks the components. To avoid the memory leaks, unsubscribe the detach event handlers and observables- Called just before Angular destroys the directive/component.

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. 

Related - Visit here to learn What is CLI

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 goes 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. User can declare multiple parameter values by separating each value with the colon(:).

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

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

In the below code there are multiple parameter values, that are seperated with the colons.

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

Output: $420

52. What is the chaining pipe in Angular?

Ans: Chaining pipe is used to perform multiple functions within the 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 for 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 be proceed.

Interested to learn the differences between most popular javascript frameworks - then click here  React JS vs Angular JS

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

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.

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

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.

Angular 2 Interview Questions 

1. What is Angular2?

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 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 the some of the features that are added to the Angular2. 

  • Modular: To get the 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 into the square brackets. Eg:
  • Modern: Angular2 is targeted to the 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 mobile toolkit and techniques. The web applications which are built using mobile toolkit can be loaded on any device without or with internet connection, which is a great advantage.
  • A command line interface: With the help of commands it can generate route, pipes, components, and services.
  • Universal server rendering: It is the prominent feature of Angular2. It is a library which is used to develop the 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 an well-defined lifecycle, so you can utilize interfaces that allows 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 Angular2?

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 from 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 the 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. Directive is the mechanism by which we attach behavior to the elements.
It divides the application into smaller components. It is used to design the reusable components.
Components define  pipes Directives cannot define pipes. 
Component can be present per DOM element. 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 its 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 updated version which has more number of features and design patterns. 

11. How to convert a string into currency?

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

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

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

12. Explain about hidden property 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 to 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 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 an observable data in Angular 2?

Ans: Caching of an 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 the 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.

Angular 4 Interview Questions

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 return 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 for 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:

({hero.name})

7. What do you understand by isolated unit tests?

Ans: Unit testing is all about to test 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 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, any function can 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 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 titlecase is introduced.
  • Meta Tags services are added.
  • Improvement in Angular Router.

Angular5 Interview Questions

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 of time on Angular task. The following are the Angular5 new features. 

  • AOT is a default feature. 
  • Type checking utility for the template.
  • Activated watching mode that helps developers to debug the errors. 
  • Saving metadata and fetching utilities.
  • Unwanted files are removed permanently( *.ngfactory.ts)
  • Displaying error message to help developers to handle the error investigation.
  • Feature upgrades are smooth then 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 little different than before Angular versions: 

Component: – ng g component my-new-component

Pipe: ng g pipe my-new-pipe

Class: ng g class my-new-class

Directive: ng g directive my-new-directive

Service: ng g service my-new-service

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 like @Output (alias).

Angular 6 Interview Questions

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 matchers.
  • 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 declare component 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 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 method 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 7 Interview Questions

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 below code:

ng generate class [options]

ng g class [options]

Where name refers to the name of a class.

Options refer to the project name, spec value in 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 the upgrade from the 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 8 Interview Questions

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. 

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 changing in Angular 7 are Virtual scrolling, material design library, and Component Dev kit. Breaking changing in Angular 8 are CLI, Angular material and core framework. 
It supports 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 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 it 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 application can be customized.
  • It also tests the action and performance of multiple machines.
  • It constructs a graph through which you can identify the 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 in Angular 8?

Ans: Angular 8 introduced a number of new and unique options to runGuardsAndResolvers. In general, runGuardsAndResolvers is an option which 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 over the resolvers and guards, use runGuardsAndResolvers option in Angular 8.

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 Question that you faced in the interview. Our team will help you to know the answer. 

 

DMCA.com Protection Status
  • 2020-02-07
  • 59497
Share: