Infosys Angular Interview Questions

Here is the list of Angular Interview Questions which are recently asked in Infosys company. These questions are included for both Freshers and Experienced professionals. Our Angular Training has Answered all the below Questions.

1. Mention some AngularJS directives and their purpose.

Directive	Description
ng-bind	Replaces the value of HTML control with the value of specified AngularJS expression.
ng-repeat	Repeats HTML template once per each item in the specified collection.
ng-show	Display HTML element based on the value of the specified expression.

2. How to create Directive using AngularJS? Give an example.

Define custom directive to handle above custom html tags. varmainApp = angular. module(“mainApp”, []); //Create a directive, first parameter is the html element to be attached. //Attaching student html tag. //This directive will be activated as soon as any student element is encountered in html mainApp.

3. Can we use the open-source Closure Library with Angular? How?

Use widgets from the Closure Library in AngularJS.

Step 1: Download and Setup the Closure Library.
Step 2: Create a JavaScript file that uses the Closure Library.
Step 3: Create an HTML file.
Step 4: Say Hello to the Closure Library.

4. How could one create a single-page application using AngularJS? Which provider is used to achieve this objective?

To create single page application:

Need an html template.
Define route.
Divided page content based on route
Write AngularJS code inside a js file.
Create a JS file app.js
Create another js file appCtrl.js
Add attribute index.html page Inside html tag
Show every page data base on controller
The controller attribute use the ng-controller directive and use it to top of the page.

5. Explain how MVC is achieved with AngularJS? What are the benefits of client-side MVC, in general?

MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view.

6. What is restrict option in directive? Can you define multiple restrict options on a directive?

AngularJS Directive’s restrict key defines how a directive can be used in HTML. The possible values for restrict (and so the ways in which we can use our directive) are: A : Specifies that Directive will be used as an attribute, like

<div item-widget></div>, as was done in last example.

7. What are the differences between AngularJS module’s Service, Provider and Factory?

A factory is a simple function which allows adding some logic before creating the object. Service: A service is a constructor function which creates the object using new keyword. Add properties and functions to a service object by using this keyword. A provider is used to create a configurable service object. It returns value by using $get() function.

8. The following HTML is given <button ng-click=’showAlert()”>ALERT</button> How can the attached controller look like, to show an alert window when clicking on the button?

AngularJS Events are the functionalities that allow web applications to interact with user inputs like mouse click, keyboard inputs, mouse hover, etc. Events need to be handled in web-based applications in order to perform specific tasks and actions. It is triggered when a specific action is performed by the user.

9. What is the difference between “.$digest()” and “.$apply()”? Why would you ever call “.$digest()” on a scope?

$digest() gets called without any arguments. $apply() takes a function that it will execute before doing any updates. The other difference is what they affect. $digest() will update the current scope and any child scopes.

10. Explain AngularJS boot process.

The platformBrowserDynamic() part of this line of code indicates that are about to boot Angular in a browser environment. Use the bootstrapModule() function to boot the entry module by supplying the module as an argument. Inside the root module, specify your entry point component in the module configuration object.

11. What is hoisting in JS?

JavaScript Hoisting refers to the process whereby the compiler allocates memory for variable and function declarations prior to execution of the code. Conceptually hoisting is often presented as the compiler “splitting variable declaration and initialization, and moving (just) the declarations to the top of the code.

12. How did you get the value from input box using JQuery?

To get the textbox value, use the jQuery val() function. For example, $(‘input:textbox’). val() – Get textbox value.

13. How many types of ngModule?

There are five types of NgModule:

Features Module.
Routing Module.
Service Module.
Widget Module.
Shared Module.

14. What is Pipe?

Pipes are a useful feature in Angular to transform values in an Angular template. There are some built in pipes, but can build your own pipes. A pipe takes in a value or values and then returns a value.

15. ln component and service which logic that we have to write?

The component controller logic should contain logic to subscribe to service events, or call service methods for the purposes of retrieving the model and presenting it to the view.

16. Write AJAX call syntax?

JQuery | ajax() Method

Type: It is used to specify the type of request.
URL: It is used to specify the URL to send the request to.
It is used to specify a username to be used in an HTTP access authentication request.
xhr: It is used for creating the XMLHttpRequest object.
async: It’s default value is true.

17. Explain component metadata?

Component metadata holds the complete information about the current component, which represents the single unit as a component, along with its content like business logic and the view configuration.

18. How did we work with multiple modules in our project?

When we create multi-module project, we need to configure packaging pom in the parent POM file instead of jar. When we create Maven Modules in the project, Spring Boot automatically configures the modules in the parent pom inside the module tag.

19. doAdd(1,2) doAdd(1,2,3,4) use the above arguments to sum the value. Using without any parameter receive throught the function?

A programming language is said to have First-class functions when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. Now we just need to create a function which returns another function, which in turn would give the sum.

20. What is primitive data type?

Simple types are also called the primitive types and they belong to built-in predefined types found in TypeScript. The primitive data type is number, string, Boolean, null type, and undefined types.

Free PDF : Get our updated Angular Course Content pdf

21. How can be the permission denied errors handled with AngularJS? Explain with example.

The idea is to implement a directive which is configured with a list of permissions. If the user has none of these permissions the directive will hide the element which it annotates. The element will only be visible of the user has a least one of the given permissions.

22. At framework level, how does Angular retrieve the matching elements for processing? Give example.

At framework level, how does angular retrieve the matching elements for processing? ans : makes use of jqlite(element) function. ifjquery is used, jquery(element) is used by way of assigning jquery to jqlite variable.

23. List a few ways to improve performance in an AngularJS app.

AngularJS optimization tips

Keep an eye on your digest cycle.
Limit your watchers.
Use one-time binding, if possible.
Use scope.
Use Chrome DevTools Profiler and Timeline.
Limit DOM access.
Disable CSS class and comment directives.
Disable debug data.

24. Can we have nested controllers in AngularJS? In the case of nested controllers, does the $scope object is shared across all controllers?

YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other.

25. With which methods you can bootstrap your angular app for multiple modules? Explain the methods in detail.

It is required to bootstrap for multiple modules and it can be achieved by using two methods:

Automatic bootstrap (by combining multiple modules into one module)
Manual bootstrap.

26. How AngularJS is compiled? How is AngularJS compilation different from other JavaScript’s framework?

The $compile traverses the DOM and looks for directives. Each compile function returns a linking function, which is then composed into a combined linking function and return. $compile links the template with the scope by calling the combined linking function from the previous step.

27. What is dependency injection and how does it work in Angular? How does DI benefit in Angular?

Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them. Angular’s DI framework provides dependencies to a class upon instantiation. Use Angular DI to increase flexibility and modularity in the applications.

28. What is routing? How can we implement routing in Angular?

The Angular router is a core part of the Angular platform and enables developers to build Single Page Applications with multiple views and allow navigation between these views. Import RouterModule and Routes into the routing module. The Angular CLI performs this step automatically. So define the routes in Routes array in which each route in this array is a JavaScript object that contains two properties. Add routes to the application

29. How does Angular JS know when to perform dirty checking and update DOM output?

Dirty checking is a simple process that boils down to a very basic concept: It checks whether a value has changed that hasn’t yet been synchronized across the app. The Angular app keeps track of the values of the current watches.

30. How can we dynamically create forms in Angular?

Dynamic forms are based on reactive forms. To give the application access reactive forms directives, the root module imports ReactiveFormsModule from the @angular/forms library.

31. Explain Call and apply method?

Both call () and apply() can execute a function with a specified value of the this The main difference between call() and apply() is the way have to pass in arguments into it. In both call() and apply() ,Pass as a first argument the object you want to be the value as this .

32. What are the new features in CSS3?

Overview of New Features

Box Shadow. One of the CSS3 new features is the box-shadow property that adds a shadow to an element.
Opacity. One of the CSS3 properties called opacity makes elements see-through or completely transparent.
Rounded Corners, Attribute Selectors.
New Colors, More than Web-Safe Fonts.

33. You can access HTML local reforence alias in component’s typescript code using __________ decorator

Angular’s template reference variables provide a useful API through which you can interact with DOM elements and child components directly in the Angular code. Use the use-case for @ViewChild decorator to access HTML local reference.

34. Write a syntax for ngFor with example

The syntax is *ngFor=”let of “. is a variable name of your choosing, is a property on the component which holds a collection, usually an array but anything that can be iterated over in a for-of loop.

35. Diff between functional hoisting and variable hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Inevitably, this means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

Request more information

Infosys Angular Interview Questions