Angular 8 Interview Questions and Answers

These Angular 8 questions have been designed for various interviews, competitive exams and entrance tests. We have covered questions on both basic and advanced concepts which will help you improve your skills to face interview questions on Angular 8.

All the Web developers, Front End developers, UI/ UX developers and designers will find these questions extremely useful. All freshers, BCA, BE, BTech, MCA and college students wanting to make a career in front end designing will be highly benefited by these questions.This section covers Angular 8 topics like – new features in angular 8, key parts of Angular 8 Architecture, Lazy Loading in Angular 8 etc

1. What is the difference between Angular 7 and Angular 8?

Ans:

Angular 7	Angular 8
Angular 7 is difficult to use	Angular 8 is easier to use
It has features such as Virtual scrolling, CLI prompts, Application performance, Drag, and drop, Bundle budget, Angular compiler, Angular elements, NativeScript, Better error handling, etc.	It has unique and advanced level features such as Differential Loading, Ivy rendering Engine, API builders, Bazel support, Support for $location, Router backward compatibility, Opt-In Usage sharing, web- workers, etc.
Breaking changes in Angular 7 are- Component Dev Kit (CKD), Material design library and virtual scrolling.	Breaking changes in Angular 8 are- Core framework, Angular, material library and CLI.
It will support a lower version of typescript version 3.4.	It will not support a lower version of typescript version 3.4.
It supports all types Node.js version	It supports Node.js version 12 or later

2. What is bazel in Angular 8?

Ans:

In Angular 8, Bazel is a new build system and it is available for a short period of time. It is the new feature of Angular 8, which provides a platform to make your backends and frontends with a similar tool. It has the possibility to have remote builds as well as cache on the build farm.

3. What is the purpose of the Wildcard route?

Ans:

Wildcard routing is used in Angular 8 for defining the route of pages. Specific changes/updates can be made when defining the route using Wildcard.

4. What is the difference between promise and observable in angular?

Ans:

Observables	Promises
Both synchronous as well as asynchronous	Always asynchronous
Can emit multiple values	Provides only one single value
It is lazy	It is eager

5. What is the purpose of Codelyzer?

Ans:

Codelyzer is an open-source tool in Angular 8 whose main function is to check for errors in codes not following pre-defined guidelines. It runs on the tslint.json file and checks only the static code in Angular 8.

6. What are the new features in angular 8?

Ans:

Angular 8 it has following new features such as

• Differential loading- It is a technique that automatically makes your angular applications more performant. When you build applications for production, two 
• bundles are created- One bundle for Modern browsers that support ES6+ and another bundle for older browsers that only support ESS.
• Dynamic imports for lazy routes- In Angular version 8 there is nothing new in the concept of lazy routes itself but the syntax has totally changed. In the older version of Angular CustomString Syntax is used, but angular 8 uses standard dynamic import syntax so the syntax which is customized to Angular is migrated to industrial standard.
• Ivy rendering Engine- It translates the templates and components into regular HTML and javascript that the browser can interpret and understand.
• Bazel- It is a building tool through which angular developers can build backends and frontends.

7. What are the limitations of Web Workers?

Ans:

Here are the limitations of a Web Worker:

• A web worker cannot directly manipulate the DOM
• It has limited access to methods and properties of the window object.
• It cannot be run directly from the file system. A web worker needs a server to run.

8. How Performance Improvements on the core in Angular 8?

Ans:

Angular 8 has advanced level features which ensure systematic workflow and performance improvements. It has apparent features such as differential loading, CLI workflow improvements, Dynamic imports for lazy routes, Ivy rendering engine, Bazel, etc.

9. Why did we use Service Workers in Angular?

Ans:

A Service Worker is used in Angular 8 to build the basic steps of converting an application into a Progressive Web App (PWA). Service workers function as network proxies and intercepting all outgoing HTTP requests made by the application and how to respond.

10. How to upgrade angular 7 to 8?

Ans:

Steps to upgrade Angular 7 to 8

• Install TypeScript 3.4
• Use Node LTS 10.16 or its advanced version
• Run command on terminal panel/CLI -> ng update @angular/cli@angular/core

11. How can you hide an HTML element just by a button click in Angular?

Ans:

Ng-hide command is used to hide HTML elements if an expression is true.

Here’s an example:

12. Why is typescript used in angular 8?

Ans:

Angular uses TypeScript because:

• It has a wide range of tools
• It’s a superset of Angular
• It makes abstractions explicit
• It makes the code easier to read and understand.
• It takes most of the usefulness within a language and brings it into a JS environment without forcing you out.

13. What are new features in Angular 9?

Ans:

Here are the top new features of Angular 9

• An undecorated class migration schematic added to the core.
• Numeric Values are accepted in the formControlName.
• Selector-less directives have now been allowed as base classes in View Engine in the compiler.
• Conversion of ntsc diagnostics to ts.Diagnostics is possible

14. What is the use of RxJS in angular?

Ans:

Angular 8 uses observables which are implemented using RxJS libraries to push code. The main job of RxJS is to work with asynchronous events.

15. What is NgUpgrade?

Ans:

NgUpgrade in Angular 8 is a library which is used to integrate both Angular and AngularJS components in an application and also help in bridging the dependency injection systems in both Angular & AngularJS.

16. Which command is used to run static code analysis of an angular application?

Ans:

The ng lint command is used to run static code analysis within an Angular application.

17.What is Angular DSL?

Ans:

A domain-specific language (DSL) is a computer language specialized to a particular application domain. As well as, Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific HTML-like syntax on top of normal HTML. As well as, it has its own compiler that compiles this syntax to HTML that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation.

There are 3 main syntaxes in Angular DSL

(): Used for Output and DOM events.

[]: Used for Input and specific DOM element attributes.

*: Structural directives (*ngFor or *ngIf) will affect/change the DOM structure.

18. What is authentication and authorization in Angular?

Ans:

Authentication	Authorization
Process of verifying the user	Process of verifying that you have relevant access to any procedure
Methods: Login form, HTTP Authentication, HTTP digest, X 509 Certificates, and Custom Authentication method.	Methods: Access controls for URL, secure objects and methods and Access Control Lists (ACL)

19. How to install Angular 8?

Ans:

Steps for the Installation of Angular 8 environmental setup

Step 1

Before installing Angular IDE using Angular CLI tool, make sure that Node.js has already installed 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 it using https//nodejs.org/en/
• Install it on your system
• Open node.js command prompt
• Check the version run the below command, in the console window

Step 2

In order to install Angular CLI, use the following commands

Step 3

To check the node and angular CLI version, run the below command on the console terminal

20. What is runGuardsAndResolvers 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.

21. Why is Incremental DOM Tree Shakable?

Ans:

In Angular 8, the framework does not interpret components in an incremental DOM. It uses component references instructions, and if it does not refer to a particular instruction, it shall be left unused. Now, VIrtual DOM requires an external interpreter. Hence, not knowing which components to display, everything is shifted to the browser, making the DOM shakeable.

22. What is the difference between real Dom and virtual Dom?

Ans:

Real DOM	Virtual DOM
DOM is a language-neutral interface allowing programs and scripts to dynamically access and update multiple objects like content, structure, and style of a document.	Is a collection of modules designed to provide a declarative way to represent the DOM for an application.
The DOM represents the document as nodes and objects.	A virtual DOM object is a representation of a DOM object, like a lightweight copy.
It is an object-oriented representation of a web page, modified with a scripting language like JavaScript.	Virtual DOM is ideal for mobile-first applications.

23. What is typeof checks in Angular 8?

Ans:

The working of types of types of checks in Angular 8 is similar to 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’ “.

24. How to rollback the whole object when navigating back to a page managed by Angular Router in Angular 8?

Ans:

The angular router in Angular 8 enables rollback the whole object to the next as users perform application work. To present a specific component view to a given URL, Angular Router is the foremost service that presents. In order to import an Angular router, it is mandatory to install a library package, @angular/router.

25.What is data binding in Angular 8?

Ans:

Data Binding is one of the key concepts of Angular 8. It is the most eminent technique which is used to link your data to the view layer. It is used to make a communication between the DOM and the TypeScript code of your component. In simple words, you can say that data binding is a communication between the typescript code of your component and your template, which the user sees. It makes it easy to define interactive applications without worrying about pushing and pulling data.

There are two types of data binding i.e., one-way data binding, two-way data binding.

26. What is the use of String Interpolation in Angular 8?

Ans:

It is used to extract the output data from a TypeScript code to the HTML template view layer. It shows the data from the component to view layer in the form of curly braces. This interpolation technique adds the value of property to the component.

String Interpolation Example:

27. What is the Purpose of Event Binding in Angular 8?

Ans:

Event binding is a technique in Angular 8 used to handle the events raised from the DOM like button click, mouse move etc. When the DOM event happens (eg. click, change, keyup, keydown), it calls the specified method in the component.

See an example of event binding. In this example, the playMusic() method from the component will be called when you will click the button:

For example:

28. How can you create an app in Angular 8?

Ans:

You can easily create an Angular 8 web app using Angular CLI. Type the following command to create the Angular 8 web app.

Syntax:

Example:

The above command will create an Angular 8 app with the name “myapp.” Then, the Angular CLI will automatically install the required NPM modules. Before this, you must ensure that you have Node.js, Angular 8, and installed Angular CLI using the following command:

You can also manually create an app folder and install ng dependencies.

29. What is the main purpose of Angular 8 forms?

Ans:

The main purpose of Angular 8 forms is to handle the user’s input. You can also use these Angular forms in your application to enable users to log in, update profiles, enter information, or perform many other data-entry tasks.

There are two approaches to handle the user’s input through forms in Angular 8:

• Reactive forms
• Template-driven forms

Both approaches are used to collect user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

30. What is the use of reactive forms in Angular 8?

Ans:

Reactive forms use a model-driven approach to handle form inputs where values constantly change over time. It uses an explicit and immutable approach to manage the state of a form at a specific time. Every time the changes occur to the form state, it returns a new state. The reactive forms are used mainly for the following features:

• Reactive forms are more robust than template-driven forms.
• Reactive forms are more scalable, reusable, and testable.
• Reactive forms are preferred to use when the forms are a key part of the application, or the application is already built using reactive patterns. In both cases, reactive forms are best to use.

31. What are the benefits of using Template-driven forms in Angular 8?

Ans:

Following are the benefits of using Template-driven forms:

• You should use Template-driven forms if you want to add a simple form to your application because template-driven forms use two-way data binding to update the data model in the component. By using this, you can see the changes instantly as you make changes in the template and vice versa.
• Template-driven forms are easy to use in the application, but they are not as scalable as Reactive forms, so they are preferred to use in test applications for learning purposes.
• Template-driven forms are mainly used if your application requires a very basic form and logic. It can easily be managed in a template.

32. What is the difference between reactive forms and Template-driven forms in Angular 8?

Ans:

Both Reactive forms and Template-driven forms are used to manage and process data differently. Each form offers different advantages. Here, we have compared both forms to see the differences:

Reactive Forms	Template-driven forms
Reactive forms are more robust, so they are best to use.	Template-driven forms are best if you want to add a simple form to your application. For example email list signup form.
Reactive forms are more scalable, reusable, and testable, so they are preferred to use in professional websites for the industry.	Template-driven forms are easy to use in the application, but they are not as scalable as Reactive forms, so they are preferred to use in test applications for learning purposes.
Reactive forms are most preferred to use if forms are a key part of your application, or your application is already built using reactive patterns. In both cases, reactive forms are best to use.	Template-driven forms are mainly used if your application requires a very basic form and logic. It can easily be managed in a template.

33. What do you mean by Angular Universal?

Ans:

Angular Universal is a technology that is used to render Angular applications on the server. This process is called SSR (server-side rendering). A simple Angular application is executed on the browser as all the Angular applications are single-page applications, so the rendering always occurs on the browser. This process of rendering single-page applications is called the client-side rendering process (CSR). On the other hand, the Angular Universal is executed on the server, generating static application pages that later get bootstrapped on the client. That’s why Angular Universal application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

34. What is AOT in Angular 8?

Ans:

In Angular 8, AOT stands for Ahead-of-Time compiler. It pre-compiles the application components and their templates during the build process.

There are several reasons why apps compiled with AOT launch faster:

• The application components that are compiled with AOT execute immediately, without client-side compilation.
• Here, templates are embedded as code within their components, so there is no client-side request for template files. That’s why it is fast.
• The compiler doesn’t entertain the unused Angular directives. It’s also a reason for its fast response.

35.What is Angular 8?

Ans:

Angular 8 is a client-side TypeScript based framework used to create dynamic web applications. It is very similar to its previous versions except having some extensive features. It was developed by the same team that develops AngularJS and is a complete rewrite of its first version. Now, this is led and maintained by the Angular Team at Google and also by a community of individuals and corporations.

36.When was Angular 8 released, and how was it different from Angular 7?

Ans:

Angular 8 was released on May 28, 2019, worldwide. It has a lot of similarity to its previous versions, such as Angular 7, except having some extensive features.

The most distinguish features of Angular 8 are:

• Angular 8 provides differential loading for all application code.
• Dynamic imports for lazy routes
• Web workers
• It provides support for TypeScript 3.4

It provides Angular Ivy as an opt-in preview which has some other advantages:

• Generated code that is easier to read and debug at runtime
• Faster rebuild time
• Improved payload size
• Improved template type checking
• Backward compatibility

37. Can we upgrade the older version of Angular that we have installed on our system to the Angular 8 version? If yes, then how?

Ans:

Yes. If you want to upgrade your Angular CLI or any older version of Angular to Angular version 8, you can easily do it. Follow the steps given below:

• First, check the older version of Angular that you are using. Run the ng –version command on the Node.js command prompt.
• Now, you have to uninstall the older version of Angular by using the following command.

• Now, verify and clear the cache by using the following commands.

• Now, install the latest Angular CLI (Angular 8) by using the following command.

• You can now verify that you are using the correct version by using the following command.

38.Why is Angular so popular in Modern Application Development?

Ans:

Nowadays, Angular is a very popular framework and platform which has made robust web applications development very easy. There are many reasons behind its popularity: it unites the declarative templates, dependency injection, the end to end tooling, and integrates the top performance to resolve developers’ development challenges. Angular 8 facilitates developers to develop applications that could be live on the web and mobile, respectively.

39.What are the most prominent features of Angular 8?

Ans:

Angular 8 is a very popular Typescript development framework used to develop Web Applications. Following is the list of most prominent features of Angular 8 that makes this framework powerful.

Angular 8 support Cross-Platform Features

• The Angular 8 platform can be used to develop Progressive Web Apps. By using Angular 8, you can develop an extremely fast website that can provide app-like experiences with zero-step installation and high-quality performance.
• With Angular 8, you can create native mobile apps by using strategies like Ionic, Cordova, or NativeScript.
• With Angular 8, by using native OS APIs, the developers can create Desktop-Installed apps for Windows, Mac, and Linux.

Better Speed & Performance

• Angular 8 supports code generation facilities that convert the templates into highly optimized code for JavaScript virtual machines. That’s why Angular 8 is super fast.
• Angular 8 apps and websites are SEO friendly.
• Angular 8 uses a new Component Router to provide a code-splitting facility that makes apps load faster.

High Productivity

• Angular 8 provides easy and powerful template syntax to create UI views.
• It provides Angular CLI, which is a command-line tool. This tool is used to start building fast, add components and tests, and then instantly deploy it.
• Angular’s IDEs make development easy and help you to find errors instantly. You can also see the other feedback in editors and IDEs.

Provide Full Development Support

• Angular 8 supports animation. The developers can create high-performance animations with intuitive API and a very little code of Angular.
• The angular framework helps to create accessible applications with ARIA-enabled mechanism and developer guides.

40.What is the latest released version of Angular?

Ans:

Angular 10 is the latest released version of Angular, released on June 24, 2020.

41.What is the use of the Wildcard route in Angular 8?

Ans:

In Angular 8, the Wildcard route is used to define the route of pages. You can make specific changes/updates while defining the route using Wildcard.

42. What are the differences between promises and observables in Angular 8?

Ans:

Following is the list of differences between promises and observables in Angular 8:

Promises	Observables
Promises can deal with a single asynchronous event at a time.	The observables can handle a sequence of asynchronous events over a period of time.
Promises are always asynchronous.	Observables are both synchronous as well as asynchronous.
Promises generally provide only a single value.	Observables can emit multiple values.
Promises are not lazy. They can execute immediately after creation.	Observables are very lazy. They can’t be executed until you subscribe to them using the subscribe() method.
Promises are not cancellable.	Observables have subscriptions that can be canceled using the unsubscribe() method. After that, they stop the listener from receiving further values.
Promises don’t provide any operations.	Observables provide the map for forEach, filter, reduce, retry, and retryWhen operators.
Promises push errors to the child promises.	Observables deliver errors to subscribers.

43. What is the usage of Codelyzer?

Ans:

Codelyzer is an open-source tool in Angular 8 that sits on top of TSLint. It is used to check whether Angular TypeScript projects follow a set of rules or not. It also checks the errors in codes, not following predefined rules. It contains more than 50 rules for checking if an Angular application follows best practices. It runs on the tslint.json file and checks only the static code in Angular 8.

Codelyzer is by default inbuilt with the projects set up with the Angular command-line interface (CLI).

44. How Angular 8 has enhanced the performance over its previous versions?

Ans:

Angular 8 consists of advanced level features such as differential loading, CLI workflow improvements, Dynamic imports for lazy routes, Ivy rendering engine, Bazel, etc. which ensure systematic workflow and performance improvements.

45. What do you mean by Ivy in Angular 8?

Ans:

Ivy is the code name for next-generation compilation and Rendering pipeline or Rendering Engine. It was released in Angular 8 as Opt-in. At the release of Angular 9, Ivy was intended to be the by default rendering engine instead of the older compiler and runtime, known as View Engine.

46. Which command is used to check the current version of Angular CLI?

Ans:

The ng -version command is used to check the current version of Angular CLI.

47. How do you check what version of Angular CLI you are using?

Ans:

Use the ng -version command to check your current version of Angular CLI.

48. Which command do you use to run and load the Angular App?

Ans:

Use the ng serve command to run and load the Angular App.

49. Which command is used to install the latest version of Angular CLI?

Ans:

The following command is used to install the latest version of Angular CLI:

50. What do you mean by type of checks in Angular 8?

Ans:

In Angular 8, the type of checks is used to check the type of value assigned to the variable. It is the same as we use in JavaScript. In Angular version 8, you can also check the value assigned to the object by using typeof checks.

51. What are the most important parts of the Angular 8 Architecture?

Ans:

The architecture of an Angular 8 application follows some fundamental concepts. The basic building blocks are NgModules that are used to provide compilation context for components and collect related code into functional sets. A set of NgModules are used to define an Angular app.

Following is the list of most important parts of the Angular 8 architecture:

• Modules
• Components
• Templates
• MetaData
• Data-Binding
• Directives
• Services
• Dependency Injection

52. What is the requirement and usage of Angular 8 components?

Ans:

The Angular 8 components are the list of classes with decorators that mainly mark their own types and provide metadata that guide Angular to do things.

Every Angular application always has at least one component known as a root component that connects a page hierarchy with page DOM. Each component defines a class that contains application data and logic and is associated with an HTML template that defines a view to be displayed in a target environment.

53. What is the usage of NgUpgrade in Angular 8?

Ans:

The NgModules in Angular 8 is used for the following things:

• The NgModule is a class marked by the @NgModule decorator where the @NgModule decorator is used to take a metadata object that describes how to compile a component’s template and how to create an injector at runtime.
• The NgModules is used to configure the injector and the compiler and also help to organize the related things together.
• The NgModule is used to identify the module’s own components, directives, and pipes. It can also make some of them public, through the exports property, to facilitate external components to use them.

54. What is the usage of Angular 8 ngFor Directive?

Ans:

The Angular 8 ngFor directive is used to repeat a portion of the HTML template once per each item from an iterable list (Collection). The ngFor is an Angular structural directive and is similar to ngRepeat in AngularJS. Some local variables like Index, First, Last, odd, and even are exported by ngFor directive.

Syntax for ngFor Directive

55. What is the usage of Angular 8 ngIf Directive?

Ans:

The Angular 8 ngIf directive is a structural directive that is used to add or remove HTML elements according to the expression. The expression must return a Boolean value true or false. You can see the functioning of nglf directive clearly. If the expression is false, then the element is removed. Otherwise, the element is inserted. It is similar to the ng-if directive of AngularJS.

Syntax for ngIf Directive

56. What is the difference between an Annotation and a Decorator in Angular?

Ans:

Annotations in angular are the “only” metadata set of the class using the Reflect Metadata library. They are used to create an “annotation” array. On the other hand, decorators are the design patterns that are used for separating decoration or modification of a class without actually altering the original source code.

57. What do you understand by controllers in Angular?

Ans:

Controllers are JavaScript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

58. What is scope in Angular?

Ans:

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. Scopes can watch expressions and propagate events.

59. Enlist the major technologies used to create Angular 8 Projects?

Ans:

Some of the popular technologies used to create Angular 8 applications are:

Karma: It is a testing framework for Angular development that provides an environment to test your application on real browsers, phones, and tablets.

Protractor: It is also an end to end test framework that is built on top of WebDriver JS.

Ment.io : it is used to introduce mentions and macros widgets with no dependencies on jQuery.

Angular Kickstart: It speeds up the development process of your AngularJS application.

AngularFire: It is a flexible API that is used to create backends in your Angular application.

60. What is data binding?

Ans:

In Angular, data binding is one of the most powerful and important features that allow you to define the communication between the component and DOM(Document Object Model). It basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and component. In Angular, there are four forms of data binding:

 String Interpolation

Property Binding

Event Binding

Two-Way Data Binding

61. What is the purpose of a filter in Angular?

Ans:

Filters in Angular are used for formatting the value of an expression in order to display it to the user. These filters can be added to the templates, directives, controllers or services. Not just this, you can create your own custom filters. Using them, you can easily organize data in such a way that the data is displayed only if it fulfills certain criteria. Filters are added to the expressions by using the pipe character |, followed by a filter.

62. What are the differences between Angular and jQuery?

Ans:

Features	jQuery
Yes	Yes
No	Yes
Yes	Yes
No	Yes
No	Yes
No	Yes
Yes	Yes

63. What is a provider in Angular?

Ans:

 A provider is a configurable service in Angular. It is an instruction to the Dependency Injection system that provides information about the way to obtain a value for a dependency. It is an object that has a $get() method which is called to create a new instance of a service. A Provider can also contain additional methods and uses $provide in order to register new providers.

64. Does Angular support nested controllers?

Ans:

Yes, Angular does support the concept of nested controllers. The nested controllers are needed to be defined in a hierarchical manner for using it in the View. 

65. List down the ways in which you can communicate between applications modules using core Angular functionality.

Ans:

Below are the most general ways for communicating between application modules using core Angular functionality :

Using events

Using services

By assigning models on $rootScope

Directly between controllers [$parent, $$childHead, $$nextSibling, etc.]

Directly between controllers [ControllerAs, or other forms of inheritance]

66. What is the difference between a service() and a factory()?

Ans:

A service() in Angular is a function that is used for the business layer of the application. It operates as a constructor function and is invoked once at the runtime using the ‘new’ keyword. Whereas factory() is a function which works similar to the service() but is much more powerful and flexible. factory() are design patterns which help in creating Objects.

67. What is the difference between $scope and scope in Angular?

Ans:

$scope in Angular is used for implementing the concept of dependency injection (D.I) on the other hand scope is used for directive linking.

$scope is the service provided by $scopeProviderwhich can be injected into controllers, directives or other services whereas Scope can be anything such as a function parameter name, etc. 

68. Explain the concept of scope hierarchy?

Ans:

The $scope objects in Angular are organized into a hierarchy and are majorly used by views. It contains a root scope which can further contain scopes known as child scopes. One root scope can contain more than one child scopes. Here each view has its own $scope thus the variables set by its view controller will remain hidden to the other controllers. The Scope hierarchy generally looks like:

Root $scope

$scope for Controller 1

$scope for Controller 2

$scope for Controller ‘n’

69. Why do we need Template-driven forms in Angular 8?

Ans:

In the following cases the template-driven forms are needed in Angular 8.

• If you want to add just a simple form to your application you need template-driven forms.
• They are very easy to use in the applications but they are not scalable.
• If any of your applications require a very basic logic and form then you must make use of template-driven forms.

70. Explain jQLite.

Ans:

jQlite is also known as jQuery lite is a subset of jQuery and contains all its features. It is packaged within Angular, by default. It helps Angular to manipulate the DOM in a way that is compatible cross-browser. jQLite basically implements only the most commonly needed functionality which results in having a small footprint.

71. Explain the process of digest cycle in Angular?

Ans:

The digest cycle in Angular is a process of monitoring the watchlist for keeping a track of changes in the value of the watch variable. In each digest cycle, Angular compares the previous and the new version of the scope model values. Generally, this process is triggered implicitly but you can activate it manually as well by using $apply(). 

72. What are the Angular Modules?

Ans:

All the Angular apps are modular and follow a modularity system known as NgModules. These are the containers which hold a cohesive block of code dedicated specifically to an application domain, a workflow, or some closely related set of capabilities. These modules generally contain components, service providers, and other code files whose scope is defined by the containing NgModule.  With modules makes the code becomes more maintainable, testable, and readable. Also, all the dependencies of your applications are generally defined in modules only.

73. On which types of the component can we create a custom directive?

Ans:

Angular provides support to create custom directives for the following:

Element directives: Directive activates when a matching element is encountered.

Attribute: Directive activates when a matching attribute is encountered.

CSS: Directive activates when a matching CSS style is encountered.

Comment: Directive activates when a matching comment is encountered

74. What is Dependency Injection in Angular? 

Ans:

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

75. Differentiate between one-way binding and two-way data binding.

Ans:

In One-Way data binding, the View or the UI part does not update automatically whenever the data model changes. You need to manually write custom code in order to update it every time the view changes.

Whereas, in Two-way data binding, the View or the UI part is updated implicitly as soon as the data model changes. It is a synchronization process, unlike One-way data binding.

76. What do you understand by dirty checking in Angular?

Ans:

In Angular, the digest process is known as dirty checking. It is called so as it scans the entire scope for changes. In other words, it compares all the new scope model values with the previous scope values. Since all the watched variables are contained in a single loop, any change/update in any of the variables leads to reassigning of the rest of the watched variables present inside the DOM. A watched variable is in a single loop(digest cycle), any value change of any variable forces to reassign values of other watched variables in DOM

77. Which command is used to run and load the Angular App?

Ans:

The command ng serve is used to run and load the Angular App.

78. What is Transpiling in Angular?

Ans:

Transpiling in Angular refers to the process of conversion of the source code from one programming language to another. In Angular, generally, this conversion is done from TypeScript to JavaScript. It is an implicit process and happens internally.

79. How to perform animation in Angular?

Ans:

In order to perform animation in an Angular application, you need to include a special Angular library known as Animate Library and then refer to the ngAnimate module into your application or add the ngAnimate as a dependency inside your application module.

80. What is transclusion in Angular?

Ans:

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

81. What are events in Angular?

Ans:

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

82.What are the advantages of Bazel?

Ans:

The following are the key advantages of Bazel, and they are as follows:

• It provides you the possibility to make both frontends and backends with the same tool.
• Availability of incremental build and test options.
• In Bazel, you have the possibility for cache and remote builds on the build farm.

83. How to create a service in Angular?

Ans:

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

Factory

Service

Provider

84. What is a singleton pattern and where we can find it in Angular?

Ans:

Singleton pattern in Angular is a great pattern which restricts a class from being used more than once. Singleton pattern in Angular is majorly implemented on dependency injection and in the services. Thus, if you use ‘new Object()’ without making it a singleton, then two different memory locations will be allocated for the same object. Whereas, if the object is declared as a singleton, in case it already exists in the memory then simply it will be reused.

85. What do you understand by REST in Angular?

Ans:

REST stands for REpresentational State Transfer. REST is an API (Application Programming Interface) style that works on the HTTP request. In this, the requested URL pinpoints the data that needs to be processed. Further ahead, an HTTP method then identifies the specific operation that needs to be performed on that requested data. Thus, the APIs which follow this approach are known as RESTful APIs.

86. What is bootstrapping in Angular?

Ans:

Bootstrapping in Angular is nothing but initializing, or starting the Angular app. Angular supports automatic and manual bootstrapping.

Automatic Bootstrapping: this is done by adding the ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When Angular finds ng-app directive, it loads the module associated with it and then compiles the DOM.

Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your Angular application. It is useful where you want to perform any other operation before Angular wakes up and compiles the page.

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

Ans:

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

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

88. What do you understand by constants in Angular?

Ans:

In Angular, constants are similar to the services which are used to define the global data. Constants are declared using the keyword “constant”. They are created using constant dependency and can be injected anywhere in controller or services.

89. What are 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.

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

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.

To get Cookies: For retrieving the cookies ‘get’ method is used.

To clear Cookies: For removing cookies ‘remove’ method is used.

91.  If your data model is updated outside the ‘Zone’, explain the process how you will view the view?

Ans:

You can update your view using any of the following:

ApplicationRef.prototype.tick(): It will perform change detection on the complete component tree.

NgZone.prototype.run(): It will perform the change detection on the entire component tree. Here, the run() under the hood will call the tick itself and then the parameter will take the function before the tick and execute it.

ChangeDetectorRef.prototype.detectChanges(): It will launch the change detection on the current component and its children.

92. Explain ng-app directive in Angular.

Ans:

ng-app directive is used to define Angular applications which let us use the auto-bootstrap in an Angular application. It represents the root element of an Angular application and is generally declared in <html> or <body> tag. Any number of ng-app directives can be defined within an HTML document but just a single Angular application can be officially bootstrapped implicitly. Rest of the applications must be manually bootstrapped. 

Example:

93. What is the process of inserting an embedded view from a prepared TemplateRef?

Ans:

94.What is Angular CDK?

Ans:

Angular CDK (Component Development Kit) consists of tools, services, components, classes, and modules that are used by the developers to build components of the web. It represents an abstraction of the functionalities in the Angular material themes. So, it can be used to leverage the features of the Angular Material without adopting the material design language.

CDK is an open-source toolkit that is released under the @angular/CDK npm package.

95.What do you understand about Angular elements?

Ans:

Angular elements are Angular components packaged as custom elements (it is a web standard for defining new HTML elements in a framework). Angular Elements hosts an Angular component, providing a bridge between the data as well as logic defined in the component and standard DOM APIs, thus, providing a way to use Angular components.