1. What do you understand by Angular?
2. Which technologies are utilized in Angular?
3. How does an Angular app function?
4. Why do we need client-side frameworks like Angular?
5. What is output if you utilize script tag inside template?
6. Define template expressions?
7. Define template statements?
8. Explain TypeScript.
9. Mention a pictorial diagram of Angular architecture?
10. Define metadata?
11. How Dependency Hierarchy is developed?
12. What is the objective of the async pipe?
13. Which is the option to select between external and inline template?
14. What is the objective of ngFor directive?
15. What is the objective of the ngIf directive?
16. What are main advantages provided Angular?
17. How do you classify the types of data binding?
18. Define parameterized pipe?
19. Define custom elements?
20. Do you have to bootstrap custom elements?
21. Explain the procedure of defining typings for custom elements?
22. Explain how custom elements perform internally?
23. How constructor is different from ngOnInit?
24. How Angular is different from AngularJS?
25. How is components transferred to custom elements?
26. Explain the mapping rules between custom element and Angular component?
27. Define pipes in Angular?
28. What do you mean by chain pipes?
29. What is a custom pipe?
30. Give an illustration of a custom pipe?
31. How pure pipe is different from impure pipe?
32. Explain HttpInterceptors in Angular?
33. How can one share information between components in Angular?
34. Explain ng-content and its objective?
35. Explain ngcc?
36. Explain folding?
37. Explain macros?
38. Define Angular's State function?
39. Define Angular's Style function?
40. Explain NgZone?
41. What is NoopZone?
42. Explain a bootstrapping module?
43. Explain how to use HttpClient with an example?
44. How to read the full response?
45. How will you conduct Error handling?
46. Define content projection?
47. Differentiate promise from observable?
48. Define data binding?
49. What are disadvantages of Angular?
50. Define string interpolation?
51. How interpolated content is different from the content assigned to the DOM element's innerHTML property?
52. Differentiate Angular decorator from Angular annotation?
53. Explain function of AOT compiler in Angular?
54. What are the major benefits of AOT?
55. What are the 3 phases of AOT?
56. Define components in Angular?
57. Define dynamic components?
58. What is the objective of base href tag?
59. Write about modules in Angular?
60. Define DOM?
61. Explain services in Angular.
62. How jQuery is different from Angular?
63. Explain lifecycle hooks in Angular.
64. Write about templates?
65. Explain two-way data binding?
66. Explain observables in Angular?
67. How are observables different from promises?
68. What do you Know about Angular Material mean?
69. Explain RxJS?
70. Do you know bootstrapping?
71. What do you mean by dependency injection?
72. List the Angular building blocks?
73. Explain the MVVM architecture.
74. Describe Angular authentication and authorization.
75. What do you mean by digest cycle process in Angular?
76. Mention the distinct types of Angular filters?
77. How can one create a service in Angular?
78. What do you mean by subscribing in RxJS?
79. Write about Angular Router?
80. Explain REST?
81. Explain scope?
82. Explain Angular CLI.
83. How Can You create directives Through CLI?
84. Explain schematic?
85. Do you know rule in Schematics?
86. What do you mean by Schematics CLI?
87. Write about HttpClient and mention its benefits?
88. Write about multicasting in Angular?
89. Do you know directive in Angular?
90. What happens if you do not provide handler for observer?
91. Define angular elements?
92. Explain about the browser support of Angular Elements?
93. Explain the role of SPA in Angular?
94. Explain different kinds of Angular directives.
95. Mention different kinds of compilers utilized in Angular?
96. Write about the main objective of the common Angular module?
97. How AngularJS is different from Angular?
98. Differentiate Angular expressions from JavaScript expressions.
99. What do you mean by server-side rendering in Angular?
100. Define Angular Universal?
Conclusion
Introduction
Hope you have gone through my previous post on Reactjs interview question answers and now, you'll have found significant Angular interview questions and answers that are mostly asked by the recruiters now these days.
GO Back to Main Index
1. Basic Interview Questions And Answers on Angular
1. What do you understand by Angular?
Angular is a popular open-source web based app development framework that is created by Google. Web developers use it to design and develop frontend, one-page apps that can run on JavaScript. It's well known as a full-fledged web framework as it takes care of various features of frontend web apps such as HTTP requests, routing, forms, layout, reactivity, verification, etc.
2. Which technologies are utilized in Angular?
Angular is a modern advanced frontend JavaScript framework built by Google. Angular itself utilizes various technologies for many reasons to finish some works smoothly as well as to grant developers to get a better experience while building apps with it. Angular utilizes TypeScript that is a upper level of JavaScript. So, any proper JavaScript is a proper TypeScript. Nevertheless, TypeScript permits to write JavaScript perfectly, and we can explain our own categories as well that turns capturing bugs much easier. It also utilizes RxJS that permits developers to perform with asynchronous functions better.
GO Back to Main Index3. How does an Angular app function?
The function of Angular depends on its required components. So the function of the Angular app begins with the ANGULAR.JSON config file. The developer refers to the same file to catch the targeted path, configs and the main important file. Now the procedure finally begins. Next move to the MAIN.TS file that functions as the point of entrance for the config file. It generally assists in making the web browser environment that permits it to execute the app. Now, the bootstrapping of the Angular app is accomplished through the APP.MODULE.TS.
Now the bootstrapped app component gets stored inside the APP.COMPONENT.TS file. When we call the INDEX.HTML file and ask Angular to load the app component. After loading of the component, the web content gets viewed from the APP.COMPONENT.HTML file. In this way, the Angular app executes.
4. Why do we need client-side frameworks like Angular?
Before Angular, JavaScript-made client-side frameworks, the approach dynamic websites performed was by getting an html code-based template that has spaces left empty for supplying information and content into those specific templates. This data was generally retrieved from a database. After assembling the template and information, we would provide the created HTML content back to the specific user. As you can understand, it was a bit complex, and in some matters, it consumed a lot of processing.
GO Back to Main IndexTo resolve this problem, people invented another method in which they give the mandatory information to provide a web page from the web servers to the targeted web browsers and allow JavaScript gather this information with a predesigned template.
5. What is output if you utilize script tag inside template?
If we utilize script tag inside template, Angular indicates the value as unsecure and automatically begins the procedure of sanitizing it. This eliminates the script tag but the content becomes secured, i.e. the text element. This whole procedure gives output in eliminating the injection attack risk.
Relevant Reading
- Learn How to Answer the Most Common ReactJS Interview Questions
- Top JavaScript technical Interview Question answers
- .Net core Interview questions and answers for Experienced And Freshers
6. Define template expressions?
An Angular template expression is written in double curly braces ‘{{ }}’ and creates a value. The same template expression is displayed by Angular and is assigned to a characteristic of a binding purpose. Now, the binding purpose can be an HTML element, or a directive or a component.
GO Back to Main Index7. Define template statements?
Angular methods or properties, utilized in HTML in reply to user events are known as template statements. These particular template statements grant your app to interact with users through specific functions like dynamic content view or form submissions etc.
8. Explain TypeScript.
Angular's TypeScript feature is preferred by many Front-End Developers. TypeScript supports in efficiently obtaining bugs and assists in smooth compilation by its functionality of automatic population. Also, it provides high quality interfaces, access changers, hybrid categories etc. All these gathered lead to decrease in the time of development.
9. Angular architecture?
The architecture of Angular consists of the following elements:
- Components and Templates
- Metadata
- Ng Modules
- Data Binding
- Directives
- Dependency Injection
- Services
10. Define metadata?
In Angular, when we utilize a component, it plays the role of a class unless we inform Angular through metadata that it’s a component. Metadata is included in TypeScript through a decorator. Decorators are such functions which understand the configuration and working plan of classes.
GO Back to Main Index11. How Dependency Hierarchy is developed?
Angular's dependency injection system is hierarchical. It possesses a tree of injectors that appears parallel to the component tree of application. The Dependency Hierarchy is built with the configurations. The reconfiguration of the injectors can be accomplished at any specific point of the component tree. Also, the providers for various injectors can be configured in the hierarchy of injector.
12. What is the objective of the async pipe?
Generally, the objective of the async pipe is to mark the components that need to be inspected for modification. It connects to an observable and returns the recent value it has provided. While the new value is emitted, the components are pointed by the async pipe. Whenever any component is dismissed, the async pipe unsubscribes or disconnects automatically. Like this, if the component's expression reference gets altered, the async pipe unsubscribes or disconnects from the previous Observable or Promise and connects to a new one.
GO Back to Main Index13. Which is the option to select between external and inline template?
Generally, inline templates are utilized for smaller size codes and external templates are utilized for comparatively greater displays. Nevertheless, the option of external or inline templates is sometimes made as per policy of organization, circumstance, etc.
14. What is the objective of ngFor directive?
Whenever it is desired to repeat a portion of an HTML template one time for every item from an array, the ngFor directive is utilized. Generally, it makes a template for each time as the iteration turns easier through ngFor directive.
15. What is the objective of the ngIf directive?
The objective of the ngIf directive is to eliminate or recreate a portion of DOM tree in alignment to an expression. If the ngIf directive detects that the expression is considered to be false, the element is eliminated from the tree, otherwise a matching element is put into the DOM tree.
GO Back to Main Index16. What are main advantages provided Angular?
Angular has following main advantages.
- Angular is developed through TypeScript, which grants developers to implement strongly typed code that will be transferred into JavaScript. The strongly typed code is simple to read, maintainable, and less possibilities of errors. Also, it facilitates better tooling with category hints and code accomplishment.
- Angular grants us to keep our code separated into modules, which can be utilized to wrap functionalities relevant to a particular assignment such as HTTP connection, data inspection, routing, etc.
- Angular has a big ecosystem of tools, frameworks, libraries, and plugins, etc. that enable the entire development experience much quicker and enjoyable. Some tools and libraries are Angular CLI, NgRx, and RxJSetc.
17. How do you classify the types of data binding?
Data Binding in Angular is classified as follows:
One way data binding:
Two-Way Data Binding
The updates in the view can guide to modify the data model. Similarly, any modification in the data model can alter the display from component to display template.
The different kinds of Two-Way Data Binding are:
- Interpolation
- Class binding
- Property binding
- Attribute binding
- Style binding
- Event binding
- Two-way binding
18. Define parameterized pipe?
In Angular, pipes are utilized to transfer the raw data into a desired format prior to the final view to the users. These pipes are classified into 2 types:
1- Built-in Pipes,
Built-in Pipes are also classified into 2 types – Chaining Pipes and Parameterized Pipes.
2- Custom Pipes
Parameterized Pipes include parameters. We can utilize these pipes to pass a number of parameters by mentioning a colon (:) in that command.
19. Define custom elements?
A custom element is utilized to expand HTML, wherein you can explain a tag whose content is built and handled by JavaScript code.
20. Do you have to bootstrap custom elements?
No, we don’t have to get the custom elements bootstrapped as they automatically get bootstrapped while included with the DOM. Also, the custom elements in Angular get automatically destroyed when eliminated from the DOM.
GO Back to Main Index21. Explain the procedure of defining typings for custom elements?
Defining typings for custom Angular elements can be accomplished through and WithProperties exported from ‘@angular/elements' and ‘NgElement’.
Some same codes for component is a container with input property:
22. Explain how custom elements perform internally?
From the following steps, we can understand the internal performance of custom elements
- Registration of the custom elements: Angular gets the custom elements registered through the function ‘createCustomElement()’. This function transforms a component into a class, which can get registered with the web browser as a custom element.
- Adding the custom element to DOM: Unlike a built-in HTML, the custom element gets added to DOM.
- Web Browser initiates component based class: Once we have added the custom element to DOM, we'll find a registered class instance is produced by the web browser automatically and is llinked to the DOM.
- Data binding and alter detection: At the end, the produced instance allows data binding and alter detection. The required template content is provided through the DOM data and component.
23. How constructor is different from ngOnInit?
Find below how constructor is different from ngOnInit:
Objective:
A constructor is used for initialization of class member.
But, the purpose of ‘ngOnInit’ is to get utilized in case of startup/declaration and prevent things to appear in development.
Usage:
A Constructor needs to be utilized to set up Dependency Injection, beginning of class fields, etc.
But, the ‘ngOnInit’ is utilised to compose the work code that runs as soon as the class gets instantiated.
GO Back to Main Index24. How Angular is different from AngularJS?
Following are some of the important differences between AngularJS and Angular.
Layout
Angular utilizes the components and directives.
Angularjs provides support for the MVC (Model-View-Controller) model.
Language
Angular makes use of TypeScript language which is considered as a superset of JavaScript that is written statistically.
Angularjs utilizes JavaScript which is a dynamically written scripting language.
Expression Syntax
Angular utilizes () to bind a specific event while [] to bind a given property.
Angularjs needs professionals to utilize the proper ng directive to bind a specific property or an event.
Routing
Angular utilizes @RouteConfig{(…)}
Angularjs utilizes $routeprovider.when().
Mobile compatibility
Angular provides mobile support.
But AngularJS does not provide mobile support.
Dependency Injection
Angular provides support for hierarchical dependency injection, as well as unidirectional tree-based modified direction together.
Angularjs does not provide support for dependency injection.
Structure
The simplified structure of Angular enables professionals to build and maintain big size applications easily.
Angularjs is comparatively less controllable.
25. How is components transferred to custom elements?
Mainly, two significant steps need to be followed for the purpose of transfering specific components to custom elements:
- Creating a class custom element : In the 1st step, build a custom element class through the createCustomElement() function facilitated by Angular. The function transfers an Angular component (along with its dependencies) to a specific custom element. The NgElementConstructor interface is involved through this transformation which, in turn, builds a constructor class that is utilized for creating an instance of self-bootstrapping.
- Registering element class with web browser: The ‘customElements.define() function' is utilized to register the configured constructor, and its linked custom-element tag with the CustomElementRegistry of the web browser.
26. Explain the mapping rules between custom element and Angular component?
Following are significant mapping rules between Angular component and custom element.
- The input properties of component are parsed with the corresponding attributes for the specific custom element through the ‘createCustomElement()API'.
- The Component outputs are released as HTML Custom Events and possess the custom event name that also matches the name of output.
27. Define pipes in Angular?
When we are working to obtain some dynamic information in our templates, we might have to edit or transform the information before it is given into our templates. Though different approaches are used for performing that, in Angular, but utilizing pipes is the most suitable approach. A pipe is a basic function, which we can utilize with expressions within our templates.
Some of the most popular built-in pipes in Angular are LowerCasePipe, UpperCasePipe, and CurrencyPipe, etc.
28. What do you mean by chain pipes?
The syntax for chaining pipes in Angular is mentioned in the following example:
29. What is a custom pipe?
In Angular, you can develop customized pipes which were earlier called as ‘Filters’ in Angular. Generally, we can define custom pipes as follows:
Note,
'Pipename' = name of the pipe.
‘Pipeclass’ = name of the class given to the custom pipe.
‘Transform’ = function to perform with the pipe. ‘Parameters’ = parameters that are given to the pipe.
‘Returntype’ = return type of the pipe.
GO Back to Main Index30. Give an illustration of a custom pipe?
Let us now go through the following example where we have explained a custom pipe to transfer a number to its square in the Angular app. Please keep in mind that we are utilizing ng produced pipe command to produce this customized pipe.
ng generate pipe square
31. How pure pipe is different from impure pipe?
Definition
A pure pipe gets called while Angular detects a modification in the parameters given to a pipe.
An impure pipe gets called in case of each modification detection cycle irrespective of any modification in the parameter given.
Shareability
Pure pipes can get shared across different utilities and that too without possessing any effect on the result.
You can't share impure Pipes as they might affect the inner state from outside.
Determination of change in result
In case of pure pipe, Input parameters will be able to determine the output result or the modification in it.
In case of impure pipe, Input parameters won't determine the output result or the modification in it.
Syntax
32. Explain HttpInterceptors in Angular?
HttpInterceptors are significant parts of the @angular/common/HTTP module and are utilized to check and transform HTTP requests and responses properly. These interceptors are made to conduct inspections on a request, edit the response, and then perform cross-cutting task, including logging requests, authenticating a user through a request, with use of gzip to compress the provided response, etc.
GO Back to Main Index33. How can one share information between components in Angular?
There are different procedures to share information between components in Angular.
They are mentioned as below:
- Parent to Child: through Input
- Child to Parent: through Output() and EventEmitter
- Child to Parent: through ViewChild
- Unrelated Components: through a Service
34. Explain ng-content and its objective?
The utilization of ng-content in Angular is to add the content dynamically into the component. It assists in improving component reutility and giving content into the selector of component.
Relevant Reading
- MVC ASP.Net Interview Questions And Answers
- OOPS interview questions
- Top 10 Frequently asked SQL Query Interview Questions
35. Explain ngcc?
The ngcc stands for ‘Angular Compatibility Compile' and it is a tool utilized in Angular to improve node_module, executed with non-ivy ngc into ivy compliant structure.
36. Explain folding?
In Angular, some non-exported members get folded while producing the code. This procedure in which the evaluation of a specific expression is accomplished by the collector and output is noted in the .metadata.json, is called as Folding.
GO Back to Main Index37. Explain macros?
A Macros is a significant part of a programming code that assists in the automation of regular scheduled tasks. It basically runs in an excel platform. Generally, in Angular, Macros gets support in different form of functions, static procedures etc.
Example of Macros code in Angular :
38. Define Angular's State function?
Angular's State function declares a state of animation within a trigger linked to an element.
Syntax of State function:
39. Define Angular's Style function?
Angular's Style function is utilized to declare a value/key object that possesses CSS styles/properties and are utilized for an animation. The
Syntax of Style function:
GO Back to Main Index40. Explain NgZone?
NgZone is a service facilitated by Angular that enables you to run functions in the Angular zone through a method run(). This execution is occurred while NgZone triggers modification detection automatically at the proper time.
41. What is NoopZone?
NoopZone supports Angular determine and know the exact time of triggering the modification detection. Nevertheless, in the event while Angular is utilized without a zone, the NoopZone is configured here.
42. Explain a bootstrapping module?
In Angular, the root module is utilized for launching or bootstrapping the app is called as the ‘Bootstrapping Module’. However, a Bootstrapping Module appears in each Angular app and it gets stored in the AppModule class. Hence, the Bootstrapping module is also known by the developers as AppModule.
GO Back to Main Index43. Explain how to use HttpClient with an example?
In order to use the HttpClient, just follow the steps:
- 1st step: initiate by building a HttpClient instance.
- 2nd Step: make an instance of a procedure.
- 3rd Step: Mention Command HttpClient to run the procedure.
- 4th Step: On execution: go through the response.
- 5th Step: At the end, close the connection.
- 6th Step: And start working with the response.
44. How to read the full response?
For the purpose of full response in Angular, the following code should be utilized:
45. How will you conduct Error handling?
In Angular, we can handle error by composing a function through HttpClient along with catchError from RxJS. To prevent errors, Angular’s HttpClient gives JSON responses and returns an object of JavaScript in the observable.
GO Back to Main Index46. Define content projection?
The Content projection in Angular, refers to a specific format where you will be able to insert, or project, the content that you wish to utilize inside another component. For illustration, consider a Card component that can receive the content given by another component.
47. Differentiate promise from observable?
Values
Observables possess the ability to emit different values over a specific time period.
A promise emits only a single value over a specific time period.
Execution
Observables can be run only when subscribed through subscribe() procedure.
Promises can be run after their creation.
Cancellation
We can't cancel observables as they contain subscriptions which can be cancelled through the unsubscribe() procedure.
Promises once run, we can't cancel them.
Operations
We can give operations like map for operators ‘forEach’, ‘decrease’, ‘retry’, filter, and ‘retryWhen’ operators.
Promises never provide any operations.
Errors
An observable forwards the errors to the targetted subscribers.
A promise forwards the errors to the targetted child promises.
48. Define data binding?
Data binding is among the most important and powerful features that help in establishing communication between DOM and the component. It makes the defining process of interactive applications simple as you no longer need to panic about data pushing or pulling between the component and the template.
Four types of data binding are available in Angular:
- Event binding
- Property binding
- String interpolation
- Two-way data binding
49. What are disadvantages of Angular?
Following are some disadvantages.
- Obtaining better SEO results on an Angular app can't be easier and may desire proper configuration.
- Angular possesses a lot of features itself, so it's difficult to know all of them and learn the way of their utilization.
- Angular can increase the weight of your JavaScript bundle. Hence it is not much efficient to use Angular for smaller projects because of the increasing load.
50. Define string interpolation?
In Angular, String interpolation or mustache syntax facilitates one-way data binding. It is a unique syntax that utilizes double curly braces {{}} to depict the component information.
The JavaScript expressions inside the braces that Angular needs to run to obtain the result, which can be inserted into the HTML code. However, as portion of the digest cycle, these JS expressions are generally updated and stored.
51. How interpolated content is different from the content assigned to the DOM element's innerHTML property?
Angular interpolation occurs when we compose JavaScript expression within double curly braces. For example: ‘{{ someExpression() }}’. This is utilized to add dynamic content to a specific web page. Nevertheless, we can perform the same task by assigning dynamic content to the DOM element's innerHTML property.
The main difference between these two is that, in Angular, the compiler often skips the interpolated content, i.e., HTML doesn't get interpreted, and the web browser depicts the code when it is written with brackets and symbols, rather than showing the result of the interpreted HTML. Neverthless, in innerHTML, if the content is written in HTML, then it is compiled as the HTML code.
GO Back to Main Index52. Differentiate Angular decorator from Angular annotation?
Angular Decorators are such design patterns which assist in the edit or decoration of the respective classes without changing in the original source code.
On the other hand, Angular Annotations are utilized in Angular to develop an annotation array. They utilize the library of Reflective Metadata and are a metadata set of the specific class.
53. Explain function of AOT compiler in Angular?
The AOT stands for ahead-of-time and it's a compiler in Angular which transforms Angular TypeScript and HTML code into JavaScript code at the time of the build phase, that makes the rendering procedure much quicker. This compilation procedure is required since Angular utilizes HTML code and TypeScript. The compiler transfers the code into JavaScript, which can then be effectively utilized by the web browser that runs our app.
GO Back to Main Index54. What are the major benefits of AOT?
AOT compilation has many advantages as follows:
Fast rendering:
On compilation, the web browser downloads a pre-compiled version of app that is developed by us. It can provide the app instantly without compiling the app.
Less asynchronous requests:
It carries external HTML based templates and CSS style sheets and inlines them within the JavaScript based app which decreases the number of different Ajax requests.
Smaller download size:
The compiler minimizes the code for us so that the size of download will be reduced.
Template error identification:
During the phase of compilation, any issues in the templates will be found and displayed by the compiler as an appropriate report so that they can be rectified before production.
55. What are the 3 phases of AOT?
Following are 3 phases of AOT:
- code analysis
- template type checking
- code generation
56. Define components in Angular?
Components are considered as the basic building block of the Angular user interface. Usually, a component contains HTML, JavaScript, and CSS for a specific portion of a particular interface.
GO Back to Main Index57. Define dynamic components?
Angular framework's dynamic Components help in developing large-scale applications smoothly. Generally, dynamic components are initiated and mentioned in the app at runtime.
58. What is the objective of base href tag?
The href attribute is utilized to mention the main URL for all relevant URLs on a web page. At the time of navigation, the base href tag is utilized by the Angular router as a main path to the template, component, and module files.
59. Write about modules in Angular?
A module is considered as a logical border of our app. It is utilized to encapsulate code handling with a particular aspect of the app like HTTP, routing, and validation, etc.
The significant reason why modules are utilized is to improve app composability. For illustration, if we desire to implement validation logic through various libraries, then for the implemented one, we can create a newly made validation module and replace the existing one with the newly built one, and our app would function similarly. In Angular, we develop a module through the NgModule decorator.
GO Back to Main Index60. Define DOM?
DOM (Document Object Model) has responsibility for representing the content of a specific web page and alters in the architecture of an app. Here, all the objects are organized in a tree structure. The document can easily be edited, manipulated, and used only through the APIs.
61. Explain services in Angular.
An Angular service is a term that covers different kinds of functionalities. A service can be any value, , feature or function that an app desire. A service is basically utilized to achieve a very narrow objective such as HTTP communication, sending information to a cloud service, validating data, and decoding some text, etc.
62. How jQuery is different from Angular?
JQuery is known as a JS library, whereas Angular is known as a JS frontend framework.
Following are some of the other differences
- Angular supports RESTful API, jQuery does not support the RESTful API.
- Angular allows deep linking routing, but jQuery does not allow.
- Form validation is found in Angular but not found in jQuery.
63. Explain lifecycle hooks in Angular.
At the time of developing an Angular app, sometimes we have to execute some code at some special event—uch as at the time of displaying a component on the screen or removal of component from the screen. In this way the lifecycle hooks are utilized for.
64. Write about templates?
Angular templates are written through HTML that includes elements and attributes that are particular to Angular. The templates are further connected with the information from the controller and respective model, which can be provided to offer the end user a dynamic display.
65. Explain two-way data binding?
Two-way data binding is made in Angular to make sure that the information model is synchronized in the view automatically. For illustration, whenever a user edits some information in a model and that model is being displayed in various locations in a component, that updated information should be reflected in all the locations.
GO Back to Main Index66. Explain observables in Angular?
An observable is known as a declarative approach through which we will be able to accomplish asynchronous assignment. Observables can be imagined of as streams of information moving from a web publisher to a subscriber. As we know, they are alike to promises as they both handle asynchronous requests. Nevertheless, observables are better substitutions to promises as the former comes with a lot of operators that allow developers to better control on asynchronous requests, especially if there is multiple request at a time.
67. How are observables different from promises?
Although we use both promises and observables to control asynchronous requests in the application of JavaScript, they perform in diversified ways. Promises will control only single event at a particular moment, while observables will manage a sequence of asynchronous events over an assigned time period. Observables also render us with a different types of operators that permit us to convert data movement through these observables with ease.
A promise is just a method to wrap asynchronous types of operations so that they can be utilized, while an observable is an approach to turn asynchronous operations into a stream of information that moves from a web publisher to a subscriber through a proper-defined path with different operations transforming the data along the procedure.
68. What do you Know about Angular Material mean?
Angular Material is knon as a specific UI component library that permits professionals to build consistent, impressive, and flully functional websites,web apps, and web pages. It can do so by following latest web design principles, such as valuable degradation and web browser possibility.
GO Back to Main Index69. Explain RxJS?
RxJS (Reactive Extensions for JavaScript) is a library, which is utilized so that we will be able to observables in JavaScript project, that allows us to conduct reactive programming. However, RxJS is utilized in various famous frameworks like Angular as it permits us to compose asynchronous functions or callback-type code into a list of operations conducted on a data stream that emits values from a web publisher to a respective subscriber. Also, some other languages like Python, Java, and many more, contains libraries that permits them to compose reactive code through observables.
2.Angular Intermediate Questions
70. Do you know bootstrapping?
Angular bootstrapping permits professionals to begin the Angular app. Angular supports both automatic and manual bootstrapping.
Let’s have a brief discussion on the two.
- Automatic bootstrapping: Automatic bootstrapping can be utilized to include the ng-app directive to the root of web app, always on the tag if professionals desire Angular to bootstrap the app automatically. Angular loads the related module once it obtains the ng-app directive and, then compiles the DOM.
- Manual bootstrapping: It provides more control to professionals with respect to how and when they have to begin the Angular app. It is completely valuable in places where professionals want to do other tasks prior to compilation of the page by the angular.
71. What do you mean by dependency injection?
Angular Dependency injection (DI) allows the objects to be passed as dependencies instead of hard-coding in the respective components. Also, this dependency concept is completely handy while we separate the object logic creation from its utilization.
The ‘config’ function utilizes Dependency Injection that should be configured to load the module for retrieving the app elements. Besides, this characteristics permits professionals to alter dependencies based on requirements.
GO Back to Main Index72. List the Angular building blocks?
The following building blocks play a significant role in Angular:
- Components: A component can manage various views wherein every view is a specific portion on the screen. Each Angular app possesses at least one component called the root component. This component gets bootstrapped in the main root module.
- Data binding: It is the procedure in which the different sections of a template linked with the component. HHence, the binding markup should be included in the HTML template so that Angular can realize how it can link with the template and component.
- Dependency injection: It utilizes DI to provide the mandatory dependencies, specifically services, to the new components.
- Directives: Angular templates are dynamic, and the directives assist Angular realize how it can convert the DOM at the time of manifestation of the template.
- Metadata: Classes possess metadata along with them with the assistance of decorators so that Angular will be able to process the class.
- Modules: Module or NgModule is considered as a block of code organized through the mandatory capabilities set, possessing one particular operation. All Angular apps possess at least single module, the root module, and most of the apps possess various modules.
- Routing: Angular router assists in interpretation of the URL of a web browser to obtain a client-generated result and view.
- Services: this is a vast type that ranges from functions and parameters to characteristics that play a major role in Angular app.
- Template: The display of every component is connected with a template, and the template of Angular is a kind of HTML tag that permits Angular to obtain an idea of how it should render the component.
73. Explain the MVVM architecture.
The MVVM architecture helps in removing tight coupling between the components. This specific architecture includes the following:
- Model: The model carries the business logic and information of a specific app. It contains a specific entity structure. The same model possesses the business logic, remote, model classes, and local information sources, and the particular repository.
- View: View is considered as the visual layer apps that contains the UI code. The view forwards the user's action to the ViewModel. Nevertheless, it won't get the direct response.
- ViewModel: ViewModel is the abstract layer app that links the View and Model and works like a link between the both. It never knows which View should be used, since it does not contain any facility for direct connection to the View. Both are connected through data binding, and the respective ViewModel records all the modifications that are done to the View and enables the necessary modifications to the Model.
74. Describe Angular authentication and authorization.
The user's login details are provided to an authenticate API on the server. Once the credentials are scrutinized by the server, it returns a JSON web token (JWT), which contains attributes and the information of the existing user. Next, the user is identified easily through JWT, and this procedure is called as authentication.
After logging in, users possess different kinds and levels of access—some will be able to access all, while others might possess restrictions from some specific resources. Authorization identifies the access level of the specific users.
75. What do you mean by digest cycle process in Angular?
Angular Digest cycle is the procedure in which the watch list is scrutinized to track modifications in the watch variable parameter. In every digest cycle, a comparison between present and past versions of the specific scope model values.
76. Mention the distinct types of Angular filters?
Filters in Angular assists to format the report to display it to the user. The filters can be included in services, templates, controllers, and directives. You also possess the choices to make personalized filters as per need. These filters permit you to arrange the information smoothly such that only the information that matches the respective criteria are shown. Filters are put next to the pipe symbol ( | ) at the time of expressions.
Various filters in Angular are aa follows:
currency: It transforms numbers to the format of currency.
filter: filter selects a subset having items from the array.
date: It transforms a date into a desired format
lowercase: It transforms the provided string into lowercase
uppercase: It transforms the provided string into uppercase
orderBy: It makes an array of result by the provided expression
json: It can format any types of objects into a respective JSON string
number: we can change number value into a respective string
limitTo: It prevents the limit of a provided string or array to a specific number of strings or elements.
GO Back to Main Index77. How can one create a service in Angular?
Service in Angular is considered as an object that we can substitute. It gets combined and wired with the use of dependency injection. Services are made by registering in a module that they should be displayed in. Following 3 methods are used to create a service in Angular
- Service
- Factory
- Provider
3.Angular Advanced Level Questions
78. What do you mean by subscribing in RxJS?
At the time of utilizing observables in RxJS, we have to subscribe to an observable to utilize the information that moves through that observable. This information is created from a web publisher and is utilized by a subscriber. When we subscribe to an observable, we need to pass in a function for the information and other function for handling of errors so that, in case some error, we can show some message or send the message in some procedure.
79. Write about Angular Router?
Routing in a frontend page app is considered as the task of answering to the modifications in the URL written by adding and eliminating content from the app.
GO Back to Main Index80. Explain REST?
REST in Angular stands for Representational State Transfer. It is such an API which responses on the instant request of HTTP. Here, the requested URLs to the information that needs to be processed, after that an HTTP function is utilized to detect the respective operation that has to be conducted on the information provided. The specific APIs that follow this procedure are known as RESTful APIs.
81. Explain scope?
A scope (Angular’s object) refers to the model of application. It will be a context for displaying expressions. These scopes are arranged in a hierarchical structure that is equal to the app’s DOM structure. However, a scope assists in propagating different events and noticing expressions.
82. Explain Angular CLI.
Angular CLI (Angular command-line interface). Angular supports CLI tools that enable professionals to utilize them to get the components added, deployment of them immediately, and conduct testing of various functions.
GO Back to Main Index83. How Can You create directives Through CLI?
- Begin a new project through Angular CLI command:
- Now alter the existing directory into a new directory through the following command:
- Once accomplished with altering the directory, utilize the following command to produce a new directive:
84. Explain schematic?
Schematics are known as template-based code generators which enable complex logic. Generally, it is added into collections and it gets installed with npm. The main objective of schematics is to convert a software project by producing or altering codes.
85. Do you know rule in Schematics?
Rule in Schematic is utilized to a set function that gets a Tree, converts it and returns back a new Tree at the end.
GO Back to Main Index86. What do you mean by Schematics CLI?
Schematics CLI is utilized to convert web apps.
87. Write about HttpClient and mention its benefits?
HttpClient, an Angular module uutilized for connecting with a backend service through the HTTP protocol. Generally, in frontend apps, for forwarding requests, we utilize the fetch API. Neverthless, the fetch API utilizes promises. We know that Promises are valuable, but they never offer the better functionalities than observables. Hence, we utilize HttpClient in Angular since it returns back the information as an observable, that we will be able to subscribe or unsubscribe to and conduct various operations through operators. Observables can be changed to promises, and an observable can be produced from a promise as well.
88. Write about multicasting in Angular?
When we utilize the HttpClient module in Angular to connect with a backend service and get some information fetched. After fetching the information, we can broadcast it to different subscribers, in one execution.
This work of answering with information to various subscribers is known as multicasting. It is particularly useful while we possess different portions of our apps waiting for some information. To utilize multicasting, we should utilize an RxJS subject. Since observables are unicast, they never permit multiple subscribers. Nevertheless, subjects permit more than one subscribers and are hence multicast.
GO Back to Main Index89. Do you know directive in Angular?
We use a directive in Angular to expand the syntax and capacities of a normal HTML display.
Angular directives possess particular meaning and are realized by the Angular compiler. The moment when Angular initiates compiling the CSS, TypeScript, and HTML files into a JavaScript file, it scans through the whole code and searches for a directive that is registered. In case it matches any, then the compiler alters the HTML view accordingly.
90. What happens if you do not provide handler for observer?
If we do not provide handler to a notification category, the observer automatically avoids that type of notifications and the observer instance can publish value after subscription.
91. Define angular elements?
Angular elements or components are web standards for identifying newly made HTML elements and are utilized as custom elements. Such custom elements are also known as Web Components. When we add Angular custom elements to the DOM tree, they start bootstrapping automatically.
GO Back to Main Index92. Explain about the browser support of Angular Elements?
Since Angular is built on the latest web platform standards, Angular elements are supported by Chrome, Edge (Chromium-based), Firefox, Opera, and Safari and other existing web browsers through polyfills. Polyfills make the running of complete Angular apps.
93. Explain the role of SPA in Angular?
SPA (Single Page Application) maintains one index.HTML page, even when the URL alters constantly. It is easier to develop SPA technology and vary much quick in comparison to earlier web technology.
94. Explain different kinds of Angular directives.
Following 3 kinds of directives in Angular are available.
- Components: A component is generally a directive with a specific template. It is utilized to define a single user interface through TypeScript code, HTML template, and CSS style. When we explain a component, we utilize the component with the @ symbol and provide an object with a specific selector attribute. Also, the selector attribute provides the Angular compiler the HTML tag that the component comes with so that, now, when it encounters this tag in HTML, it awares to substitute it with the component template.
- Structural: The Structural directives are utilized to alter the format of a view. For illustration, if we want to display or hide some information according to some property, we can conduct so through the ngIf directive, or if we want to add a list of information in the markup, we can utilize ‘*ngFor', and so on. The structural directives alter the format of the template.
- Attribute: Attribute directives alter the appearance of an element, component, or another directive. They are utilized as the attributes of elements. The Directives such as ngStyle and ngClass are known as attribute directives.
95. Mention different kinds of compilers utilized in Angular?
In Angular, we utilize two different kinds of compilers:
- Ahead-of-time (AOT) compiler
- Just-in-time (JIT) compiler
Both these compilers are valuable but for quite various purposes.
The AOT compiler helps in creation of a minified development of the whole codebase, that can be utilized in production. To utilize the AOT compiler, we need to utilize the ng build command with the ‘–prod blog: ng build –prod’.
This gives instruction to the Angular CLI to make an optimized production development of the codebase. This consumes a bit more time as many optimizations like minification can consume time, but for production development, this moment can be spared.
On the other hand, the JIT compiler is utilized to compile TypeScript to JavaScript as web browsers are not able to understand TypeScript and can understand only JavaScript. This compilation step is conducted in an environment development, i.e., while less time is required to be consumed on compilation and more in development to instantly iterate over characteristics. The JIT compiler is utilized when we utilize ‘ng build’ or ‘ng serve’ command to provide local service to the app or create an uncompressed development of the whole codebase.
96. Write about the main objective of the common Angular module?
The common Angular module is obtained in the package @angualr/common. It's a module which encapsulates all the commonly required characteristics of Angular, like services, directives, pipes, etc. It contains few numbers of sub-modules like the HttpClientModule, which is obtainable in the @angular/common/http pack. Due to modular characteristics of Angular, its functionalities get stored in small self-possessed modules, that can be imported and added to our projects if we desire these functionalities.
GO Back to Main Index97. How AngularJS is different from Angular?
- Architecture: AngularJS provides support to the MVC architecture in which the model has the appropriate business logic; the view displays the information retrieved from the models, and the controller handles data interactions between the model and view by retrieving informatiom from the data model and forwarding it to the view.
On the other hand, Angular architecture is made on components where instead of getting distinct pieces for logic, view, etc., we now possess a single self-possessed piece of the user interface which could be utilized in isolation or included in a large size project.
- Language: In AngularJS, we could only utilizr JavaScript. However, in Angular, we can utilize both TypeScript and JavaScript.
- Mobile support: In AngularJS, we never get mobile browser assistance out of the box, but in Angular, we get mobile support for all popular mobile browsers.
98. Differentiate Angular expressions from JavaScript expressions.
In Angular, we will be able to write JavaScript codes in HTML, which we couldn't write in common JavaScript. Most of the Angular expressions get scoped locally.
But, in case of JavaScript, such expressions get scoped against the globally window object. These types of differences, however, get reconciled while the Angular compiler compiles the Angular code we have mentioned and transfers it into simple JavaScript, which can then be realized and utilized by a special web browser.
99. What do you mean by server-side rendering in Angular?
In a genuin Angular app, the web browser runs our app, and JavaScript controls all the user interactions. Neverthless, sometimes, if we possess a large app with a bigger size bundle, the load speed of our web page is slowed down quite a bit as it desires to download all the required files, parse JavaScript, and get it run. To resolve this slowness, we can utilize server-side rendering, that permits us to provide a completely rendered web page from the server that the web browser can show and then allow the JavaScript code capture any interactions from the user.
100. Define Angular Universal?
Angular Universal package enables server-side rendering function in Angular appqs. We will bill be able to make our app ready for server-side rendering easily easily through the Angular CLI. For this purpose, we have to write the following command:
This enables our Angular app to perform well with an ExpressJS web server that compiles the pages made of HTML with Angular Universal as per client requests. Also, this creates the module of server-side app , app.server.module.ts, in our app directory.
Conclusion
Hope you must have a better knowledge on Angular interview questions. The fresher as well as working professionals can take the advantages from the above Angular interview question and answers.
GO Back to Main Index
Post A Comment:
0 comments: