HCL Angular Interview Questions

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

1.What is AngularJS?

AngularJS is a client-side JavaScript Model-View-Controller (MVC) framework used for developing rich and extensible web applications. It mainly runs on plain JavaScript and HTML and is suitable for Single Page Applications.

2. What are the features of AngularJS?

The various features of AngularJS are as follows:

Data Binding and Architecture.
Directives and Not Browser Specific.
Codeless, Speed and Performance.
Dependency Injection.
Deep Linking.

3. What do you mean by data binding?

Data binding is the process that establishes a connection between the app UI and the data it displays. It can also mean that if an outer representation of the data in an element changes, then underlying data can be automatically updated to reflect the change.

4. What are the differences between link and compile?

Compile function: To template DOM manipulation as well as to gather all the directives, the compile function is used. Link function: To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.

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

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.

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

AngularJS is a JavaScript-based front-end web framework based on bidirectional UI data binding which is used to design Single Page Applications. Single Page Applications are web applications that load a single HTML page and only a part of the page instead of the entire page gets updated with every mouse click.

7. What is the use of a filter in AngularJS?

AngularJS Filters allow formatting the data to display on UI without changing original format. Filters can be used with an expression or directives using pipe | sign. It includes various filters to format data of different data types.

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

The singleton pattern is a software design pattern that restricts the instantiation of a class to one “single” instance. This is useful when exactly one object is needed to coordinate actions across the system.

It is used where only a single instance of a class is required to control the action throughout the execution. Singleton classes are used for logging, driver objects, caching and thread pool, database connections.

9. What are the different types of filters in AngularJS?

Angular includes various filters to format data of different data types. AngularJS Filter

Filter Name	Description
Uppercase	Converts string to upper case.
Lowercase	Converts string to lower case.

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

JavaScript is a client-side scripting language as well as a server-side scripting language for creating web applications. AngularJS is a framework written in JS to build single-page applications. JavaScript is a language used to manipulate the document object model.

11. What is the difference between directives and services?

Services are used for doing other things like authentication, logging etc. Directives are used for creating widgets or wrapping existing things like jQuery plugins. Wrapping existing plugins can be a challenge and the reason would do this is to establish a two-way data binding between the plugins and angular.

12. What is routing in AngularJS?

Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. The ngRoute module helps in accessing different pages of an application without reloading the entire application.

Free PDF : Get our updated Angular Course Content pdf

13. How to handle ‘Loading chunk failed’ error in angularjs application?

To fix this, add @schematics/angular of the same version of the Angular. When @angular/pwa installed successfully, find that it has created some new files and made code changes in angular.

14. What is the difference between factory and service in AngularJS?

The major difference between an AngularJS service and an AngularJS factory is that a service is a constructor function and a factory is not. That is why, we return an object literal instead of using this in the case of a factory.

15. Do you know scope in Angular?

Scope in Angular is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in a hierarchical structure which mimics the DOM structure of the application. It can watch expressions and propagate events.

16. Can we have implement nested controllers in AngularJS?

An AngularJS application can contain as many controllers as needed, a good approach is to create a new controller for every significant view within the application, inorder to keep the code easy to maintain and upgrade.

17. What is difference between factory service and provider in AngularJS?

A factory is a simple function which allows you to add some logic before creating the object. 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. Unlike factory, it doesn’t return anything.

18. What are promises in AngularJS?

Promises in AngularJS are provided by the built-in $q service and it is a way to execute asynchronous functions in series by registering with a promise object. It has made their way into native JavaScript as part of the ES6 specification.

19. What is parent scope and rootScope in AngularJS?

“$rootScope” is a parent object of all “$scope” angular objects created in a web page. $scope is created with ng-controller while $rootscope is created with ng-app. Each Angular application has exactly one root scope, but may have several child scopes.

20. Who is the Author of Angular JS?

Google’s MiskoHevery is the founding co-author of AngularJS, a popular JavaScript UI framework that has seen considerable growth lately.

21. Angular JS is developed in which year?

AngularJS is a TypeScript language-based JS framework released in October 2010 by Google. It is a completely free framework and open source that is used in SPA projects.

22. What is AngularJS architecture?

Angular JS is the MVC based framework in which Model View Controller is a software design pattern for developing web applications.

A Model View Controller pattern is made up of the following three parts – Model: It is the lowest level of the pattern responsible for maintaining data.

View: It is responsible for displaying all data or only a portion of data to the users. Controller: It is responsible to control the relation between models and views.

23. Define directives in AngularJS.

Directives are markers on a DOM element that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children. In short, it extends the HTML. Most of the directives in AngularJS are starting with ng- where ng stands for Angular.

24. What do you mean by Controllers?

The controller in AngularJS is a JavaScript function that maintains the application data and behavior using $scope object. Attach properties and methods to the $scope object inside a controller function, which in turn will add/update the data and attach behaviors to HTML elements.

25. Why you will do ngOnDestroy after subscrib?

async Pipe has ngOnDestroy on its class so it is called when the view is contained in is being destroyed. Using the async pipe is a huge advantage if we are using Observables in our components because it will subscribe to them and unsubscribe from them.

26. What is binding in JS?

In JavaScript function binding is happens using Bind () method which helps to bind an object to a common function, so that the function gives different result when its need. Use the Bind() method to call a function with the this value, this keyword refers to the same object which is currently selected.

27. What is Arrow function? , write its syntax.

Arrow function is one of the features introduced in the ES6 version of JavaScript. It allows creating functions in a cleaner way compared to regular functions. For example, This function // function expression let x = function(x, y) { return x * y; }.

28. Indexof() If the given value is not in the string / array it will return what?

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

29. JS difference between function vs variable hoisting.

Hoisting applies to functions created using the function declaration syntax. Function declarations, as with the const variable, are defined and initialized in one step. However, functions are hoisted by moving the entire function, not just the declaration, to the top of the scope.

30. What is an injector?

The Angular Injector is responsible for instantiating the dependency and injecting it into the component or service. It looks for the dependency in the Angular Providers using the Injection token.

Free PDF : Get our updated Angular Course Content pdf

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

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

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

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

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

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

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

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

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

40. 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 Reactive Forms Module from the @angular/forms library.

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

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

43. You can access HTML local reference 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.

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

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

Take a Look : 2024 Latest Updated Full Stack training program, featuring specialized modules in React JS. Enroll now and take the first step towards a Full Stack Development Career.

Request more information

HCL Angular Interview Questions