Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

251.

What does a subscribe method do in Angular 4?

Answer»

The subscribe method in Angular comes from the RxJS library using Angular internally as an observable. It is used to synchronously and ASYNCHRONOUSLY stream data into components or services which have subscribed to the same observable type.

Here’s an example of subscribe method being used to subscribe to users to any new MAGAZINES published by the Magainze Store.

Our aim while creating Angular 4 Interview QUESTIONS and Answers, is to help you GROW as a Frontend Developer. The questions mentioned here have been asked by leading organizations during technical rounds of the interview process.

Example

let subscription = magazineStore.getMagazines().subscribe(
   (newMagazine)=>{
          console.log('newMagazine',newMagazine);
    });
Discussion
252.

How to handle HTTP error response in Angular 4?

Answer»

Here are the best practices for HTTP error handling on Angular:

  • USING a client-side solution for error handling, like HTTPClient or HTTPInterceptor
  • Using Rollbar to effectively track ERRORS.
  • Viewing the errors on Rollbar.
Example

class MyErrorHandler IMPLEMENTS ErrorHandler {
    handleError(error) {
       // do something with the exception
    }
}
@NgModule({
    providers: [{PROVIDE: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}
Discussion
253.

What are the expressions in AngularJS?

Answer»

It is the code snippets that resolves to a value. AngularJS expressions are placed inside {{expression}}.

For Example:{{1+1}}

It supports one-time binding expressions.

39. How to solve flickering ISSUE in angularJS?

The ngClock directive is USED in Angular to PREVENT the HTML template DISPLAY from flickering while the data loads. Adding the ng-cloak at the angular js root element(ag-app) will display the view on-screen, but, only after Angular compiles the DOM elements first. To ensure flickering does not continue, follow these steps:

  • Add the ng-clock directive to your page root element. One of the PERFECT positions might be <body> tag of page or the root <div> element.
  • Now, apply this code to the style sheet (CSS) to apply the style of the ng-clock class.
Example

<style>
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
</style>
Discussion
254.

What is the module in AngularJS?

Answer»

A module is a container for the DIFFERENT parts of the APPLICATION like services, CONTROLLER, filters, DIRECTIVES, etc. Module treats as a main() function. It is created using an object's module() method.

Example

var app = angular.module('MApp', []);
Discussion
255.

What variables are used with ng-repeat?

Answer»

This directive has UNIQUE variables that are USEFUL for iterating the COLLECTION. Some of these variables include, $index, $first, $MIDDLE, and $last.
Discussion
256.

What do you mean by ng-template?

Answer»

The ng-template allows US to create an HTML page using the script TAG. This template contains "id" ATTRIBUTE that can be used by the $routeProvider to map view model with a CONTROLLER.
Discussion
257.

What is string interpolation?

Answer»

The compiler matches attributes and text USING INTERPOLATE service to check if they contain any embedded expressions. As part of the NORMAL CYCLE, these expressions will GET updated and registered as watches.
Discussion
258.

What do you mean by $rootscope in AngularJS?

Answer»

Every APPLICATION contains a single root scope, and the rest of the scopes are descendant scopes of the root scope. The function of scopes is to provide separation between the view and the model, VIA a MECHANISM for observing the model for changes. Scopes also provide event emission, event broadcast, and subscription facilities.

Note: This angular interview questions and ANSWERS for experienced peoples
Discussion
259.

What do you mean by Controllers?

Answer»

Controllers are essentially Javascript functions that provide data and logic to the HTML USER interface. As the name suggests, controllers are designed to control how data will flow from the server to the HTML user interface.

32. What is internationalization? How can it be implemented in AngularJS?

Internationalization allows you to show locale-specific information on a site. AngularJS is supporting inbuilt internationalization only for three types of filters: DATE, currency, and numbers. In order to implement internalization, you only NEED to incorporate the corresponding js as per the locale of the country. It will handle the locale of the browser by default.
Discussion
260.

What is AngularJS architecture?

Answer»

AngularJS FOLLOWS MVC architecture. Here is a diagram of the MVC FRAMEWORK to BRING some clarity.

Controllers: Basically used to represent the layer comprising of the business logic. The user events trigger functions that have been stored in the controller.

Views: These are used in the ANGULAR architecture to DEPICT the presentation layer provided to the end-users/consumers.

Models: In Angular, models are used to represent your data.
Discussion
261.

Angular JS is developed in which year?

Answer»

2009
Discussion
262.

Who is the Author of Angular JS?

Answer»

AngularJS was DEVELOPED by Misko Hevery and ADAM Abrons. The FRAMEWORK is MAINTAINED by Google now.
Discussion
263.

What is provider in AngularJS?

Answer»

In Angular, a provider is a type of an object having a $GET() method. In this, the injector is USED to calls the $get method for creating a NEW instance within a service. The provider in AngularJS allows users to create a configurable service in which an INPUT can be used to set on each application for the service CREATED using the provider() function.
Discussion
264.

What is parent scope and rootScope in AngularJS?

Answer»

The parent scope in ANGULAR REFERS to the scope of the parent element of any page.

Now, in the above case, you can ACCESS the variables attached to the parentController using the childController through the parent scope.

In ANgular, all the applications have a $rootScope which is basically the scope created on an HTML element containing the ng-app directive.

Example

For example, here you have an element which is NESTED WITHIN another element using its own controller:
 <div ng-controller="parentController">
  ... something in the parent element
  <div ng-controller="childController">
     ... something in the child element
  </div>
</div>
Discussion
265.

Can we have implement nested controllers in AngularJS?

Answer»

YES, we can IMPLEMENT NESTED CONTROLLERS in ANGULARJS.
Discussion
266.

What is linking function? What are post linking and pre-linking functions?

Answer»

Links combine the DIRECTIVES with a scope and help in producing a view. The LINK function registerS DOM listeners and for updating the DOM. It gets executed once the template is cloned.

The pre-linking function gets executed before linking the child elements. Pre-linking is not safe for DOM transformation. POST linking is executed after linking the child elements. Post linking is safe for DOM transformation.

Also Read: What are the new features in ANGULAR 8
Discussion
267.

What is scope hierarchy? How many scopes can an application have?

Answer»

Each application contains ONE root SCOPE and several child scopes. And, when new scopes get created, they get added as children of the parent scope. Similar to DOM, they create a HIERARCHICAL structure.

You can easily get marks in this Angularjs Interview Question by just naming the types of fits in Angular INTERVIEWS.
Discussion
268.

Is it possible to have multiple ng-app directives on a single page?

Answer»

No. You can auto-bootstrapped only one AngularJS application per HTML document. HOWEVER, the first ngApp found will be used by default to define the root ELEMENT to auto-bootstrap. Yet, if another ng-APP directive gets placed, then it will not be PROCESSED by AngularJS. In this case, you should manually bootstrap the second app instead of using the second ng-app directive.
Discussion
269.

Is the jQuery library used in Angular?

Answer»

Yes, Angular uses jQuery if it is present in the app when your APPLICATION is being bootstrapped. However, if jQuery is not present in the script path, Angular will fall back to its own implementation of the subset of jQuery. This is called jQLite.

20. Do you know scope in Angular?

In Angular, the scope is the binding part between the HTML, i.e. the view and the Javascript, URF, controller. It acts like an object having various available properties and methods. The scope is available for both MODES, view and controller. Here’s an example of how to use the scope in Angularjs PROPERLY:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
VAR app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>
Discussion
270.

What is the factory method?

Answer»

The factory METHOD, used for creating a directive, gets invoked when the compiler matches the directive for the first TIME. This function can be invoked by $injector.invoke.

Syntax: module.factory( 'factoryName', function );

When you declare factoryName as an injectable ARGUMENT, you will get the VALUE which will be RETURNED by invoking the function reference passed to the module.factory.
Discussion
271.

What is an injector?

Answer»

An INJECTOR is a service locator that is used to retrieve the object instances as DEFINED by the invoke methods, provider, load modules, and instantiate types.

Note: Our aim while creating angular interview questions and answers, is to HELP you grow as an Angular Developer. The questions mentioned here have been asked by leading organizations during technical ROUNDS of the interview process.

Example

var $injector = angular.injector();
expect($injector.get('$injector')).TOBE($injector);
expect($injector.invoke(function($injector) {
   return $injector;
})).toBe($injector);

Discussion
272.

Why do we use directives in AngularJS?

Answer»

Directives are a core feature of AngularJS that allows you to discover new HTML syntax, which is specific to your particular application. Directives are functions that EXECUTE when the Angular compiler FINDS them in DOM. The different types of directives are an ELEMENT, attribute, CSS class, and COMMENT.
Discussion
273.

How to get image width height in angular js, before uploading a file?

Answer»

getCheckDimenstions(EV: EVENT) {
   if (ev && ev.target && ev.target.files) {
     CONST file = ev.target.files[0];
     const IMG = new Image();
     img.onload = function() {
       alert('Width:' + this.width + ' HEIGHT: ' + this.height);
     };
     img.src = URL.createObjectURL(file);
  }
}

Discussion
274.

What is the difference between factory and service in AngularJS?

Answer»
ServiceFactory
Creates a service object in Angular by using the "new" keyword.In Angular, factories are the most popular WAY to create and CONFIGURE a service.
It does not use a type-friendly INJECTION mode.It uses a type-friendly injection mode.
It cannot create primitives.Factory can be used to build primitives.
It is configurable.It is not configurable.
Example

Example of a Factory in Angular

app.controller('myFactoryCtrl', FUNCTION ($scope, myFactory) {
  $scope.artist = myFactory.getArtist()
})

app.factory('myFactory', function () {
  var _artist = '';
  var service = {}

  service.getArtist = function () {
    RETURN _artist
  }

  return service;
})

Example of a Service in Angular

app.controller('myServiceCtrl', function ($scope, myService) {
  $scope.artist = myService.getArtist();
});

app.service('myService', function () {
  var _artist = '';
  this.getArtist = function () {
    return _artist;
  }
});
Discussion
275.

What is the difference between directives and services?

Answer»

Services are one of the ways to communicate with CONTROLLERS, but it is POSSIBLE to inject one service into another. Services can be used for doing other things LIKE authentication and logging.

Directives are for creating WIDGETS or wrapping things like jquery plugins. However, if you do not need two-way data binding, then you do not need to wrap them.
Discussion
276.

What is the core difference between AngularJS compilation and JavaScript frameworks?

Answer»

Most of the Javascript FRAMEWORKS parse the HTML template as a stream and return the result as a string. The resulting string gets dumped into the DOM and can be retrieved using INNERHTML(). AngularJS WORKS DIRECTLY on HTML DOM rather than strings. It uses two-way data BINDING to sync the data.
Discussion
277.

What are promises in AngularJS?

Answer»

Promises are provided by the in-built $qservice in AngularJS. It is used to provide a way to execute MULTIPLE asynchronous functions in series by basically registering them with an object of promise. Promises are used widely in ANGULAR, Javascript and the ES6 SPECIFICATIONS equally.

Here’s an EXAMPLE of a promise object in Angular:

Example

.run(FUNCTION(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    })
})
Discussion
278.

What is a Singleton pattern? How do you use it?

Answer»

The singleton pattern allows us to limit the instantiation of a class in order to have only ONE object. We can use the dependency injection and services for enabling the singleton pattern. Whenever the singleton pattern is enabled, the class will create the object and return a REFERENCE in the next call.

NOTE: Learn the BASIC concept of Singleton pattern and WORK to crack the angular interview QUESTIONS and answers for experienced.
Discussion
279.

What is Single Page Application? How can the SPA be implemented with Angular?

Answer»

SINGLE Page Applications are web apps that load an HTML page and dynamically update it as and when users interact with the APP. However, please note that in an SPA, the page will never reload, though parts of that page may get refreshed. This functionality REDUCES the trips to the server. SPA can be implemented with Angular through Angular ROUTES.
Discussion
280.

What are the different types of filters in AngularJS?

Answer»
  • CURRENCY It formats a number to a currency format.
  • Date It formats a date to a SPECIFIED format
  • Filter It selects a subset of ITEMS from an array.
  • JSON It formats an object to a Json string
  • Limit It is used to limit an array/string, into a specified number of elements/characters.
  • Lowercase It formats a string to LOWER case
  • Uppercase It formats a string to upper case.
  • Number It formats a number to a string.
Discussion
281.

What is bootstrapping in Angularjs?

Answer»

Bootstrapping is a term for initializing the ANGULAR app. Both automatic and manual bootstrapping is supported in AngularJS. Automatic Bootstrapping is done by adding an ng-app directive to the root of the application. Manual Bootstrapping provides CONTROL on how and when to INITIALIZE the app. It is useful in PERFORMING any operation before Angular compiles the page.
Discussion
282.

How to handle 'Loading chunk failed' error in Angularjs?

Answer»

In Angular, the lazy loading feature is a design pattern to load the NgModules as needed, which then splits the build file into multiple chunks and loads them on-demand to speed up the PAGE load.

Using the lazy loading feature may result with you having to face a common issue “Loading chunk [number] failed” while navigating any route and here are the STEPS to fix it: This is the exact error displayed:

Error: Uncaught (in promise): Error: Loading chunk 0 failed.

This error’s main culprit is browser caching. To SOLVE this, we need a global error handling while forcing the app to reload if any of the chunks fail to load.

import { ErrorHandler } from '@angular/core';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: any): void {
CONST chunkFailedMessage = /Loading chunk [\d]+ failed/;
if (chunkFailedMessage.test(err.message)) {
window.location.reload();
}
}
}

This above GlobalErrorHandler class we have created will have only one job. That is, checking all the error messages for Loading chunk [number] failed and if there is one, then Angular forces to reload the app in ORDER to load all the chunks again.
Discussion
283.

What are the differences between link and compile?

Answer»

The Compile function is USED for templating DOM Manipulation and for COLLECTING the directives. The Link function is used for registering the DOM listeners as well as for an instance the DOM manipulation. This function gets executed after the template has been cloned.

Also READ: Which is BETTER to REACT vs. Angular
Discussion
284.

What do you mean by data binding?

Answer»

Data binding is automatic SYNCHRONIZATION of the data between the VIEW and model components. Data binding lets you treat the model components as a single source of truth in your applications. The view component is a projection of the model. When the model changes, the view will reflect the change, and vice versa.

NOTE: This information is LIKELY to be ASKED in angularjs interview questions.
Discussion
285.

What are the features of AngularJS?

Answer»
  • EASY to implement MVC.
  • Makes HTML more intuitive and easier to maintain.
  • Easier to access, manipulate, and implement.
  • Applications use very less CODE COMPARED to other JavaScript applications.
  • Supports test-driven development approach (TDD)
  • Unit TESTING
Discussion
286.

What is the use of a filter in AngularJS?

Answer»

<P>It is used to FORMAT the value of the expression to display the output. AngularJS enables us to apply filter. It can be added to expressions by using the pipe character |, followed by a filter.

Example

<div ng-app="myApp" ng-controller="personCtrl">    
<p>The name is {{ FIRSTNAME | uppercase }}</p>    
</div>    
<script>    
angular.module('myApp', []).controller('personCtrl', function($SCOPE) {    
    $scope.firstName = "Umesh",    
    $scope.lastName = "SINGH"
});
</script>
Discussion