Web / Angular Interview questions
1. What is AngularJS?
AngularJS is a javascript framework used for creating single web page applications and dynamic web apps. AngularJS is a structural framework that lets you use HTML as your template language and enables you extend HTML syntax to express your application...
2. What are the key features of AngularJS.
Two Way Data-Binding, Templates, MVC, Dependency Injection, Directives, Testing.
3. What are the advantages of using AngularJS?
AngularJS is a powerful JavaScript based framework that enables creating Single Page Application (SPA) and RICH Internet Application(RIA) . AngularJS applications are cross-browser compliant .
4. What are the key components of AngularJS Framework?
The below 3 core directives forms the AngularJS framework. ng-app − directive defines and links an AngularJS application to HTML....
5. What are the limitations of using AngularJS?
AngularJS runs on the client side browser that make it quite obvious to compromise on the Application security. By minimizing the JS files in Production environment and leveraging other security measures, we could build better application security....
6. Explain about AngularJS Expression.
AngularJS expressions are code snippets that are usually placed in binding inside double braces such as {{ expression }}. Expressions are used to bind application data to html....
7. Can we pass parameters to an AngularJS controller?
Yes. Using ng-init directive and a simple init function we can pass parameters to the AngularJS Controller.
8. What is bower?
Bower is a package manager for the web, Bower can manage AngularJS components that contain HTML, CSS, JavaScript, fonts or even image files. Bower does not concatenate or minify code or do anything else - it just installs the right...
9. What is a component in Angular?
Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen....
10. What are .ts extension files?
They are TypeScript files, a superset of JavaScript. Angular uses TypeScript because its types make it easy to support developer productivity with tooling.
11. How do you communicate between different modules of your application using angularjs?
The below are the ways to communicate between modules of your application using core AngularJS functionality include, Using services, Using events, By assigning models on $rootScope, Directly between controllers, using $parent, $$childHead, $$nextSibling. Directly between controllers, using Contr
12. How does interpolation, for example "{{ someModel }}" works?
It relies on $interpolation, a service called by the compiler. It evaluates text and markup which may contain AngularJS expressions....
13. What is $rootScope and how does it relate to $scope?
$rootScope is the parent object of all $scope objected created in an angular application.
14. Advantages of components in AngularJS.
Simpler configuration than plain directives. Promote sane defaults and best practices.
15. What is ngBind directive in AngularJS?
The ngBind attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes. It is preferable to use...
16. What is ngIf directive in Angular?
ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively. 'then' template is the inline template of ngIf unless bound to a different value and 'else' template is...
17. Difference between ng-show/ng-hide directives and ngIf in angularjs.
ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. While ng-if will not insert the DOM element until the condition is not fulfilled.
18. Explain directives in Angular.
Angular directives are used to extend HTML and DOM elements's behavior. These are the special attributes, that start with ng- prefix, instructs Angular HTML compiler ($compile) to attach a specified behavior to that DOM element....
19. What is the role of selector property of components in AngularJS?
The selector property instructs the Angular to display the component inside a custom tag in the index.html. @Component ({ selector: 'myApp' , template: ` < h1 > Hi {{name}} </ h1 > ` }) In the above example, selector tells...
20. Explain Angular architecture.
Angular architecture consists of 8 modules, Module, Component, Template, Metadata, Data binding, Service, Directive, and Dependency Injection.
21. Type of module in Angular 2.
There are 2 types, Root and feature modules. There is only one root module and many feature modules in an Angular application.
22. Explain root module in angular2.
Root module is an angular module class that describes how the application is assembled and the parts fitted together. The root module is usually named as AppModule....
23. What is an Angular module?
A module groups and work as container for the different parts of application such as controllers, services, directives, pipes and so on.
24. What does the npm start do?
npm start command usually run 2 commands parallelly. 1 command watches for typescript file changes to refresh and the other for lite-server to load the index html file on the browser and refresh as required.
25. How do I create a multiline template in the Angular component?
Use backtick "`" instead of single quote.
26. What is RXJS and how does it relate to Angular?
RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. Angular is built on top of RXJS.
27. How to check if a variable is defined using ngIf in Angular?
Check the variable against undefined keyword. *ngIf= "dolRecords !== undefined"
28. How to check for multiple conditions using Angular ng-if?
Use logical operator such as and (&&) to evaluate multiple conditions.
29. Features of Angular2.
Angular 2 is component based . Controllers and $scope are no longer in use and have been replaced by components and directives....
30. Explain ng-container in Angular.
ng-container is a logical container used to group nodes but is not rendered in the DOM tree as a node. ng-container can conditionally append a group of elements, using ngif in your application, it eliminates the need to wrap them...
31. Types of directives in Angular.
There are 3 types. Component, Attribute Directive, and Structural.
32. Difference between Directive and component in Angular.
Directives associate behavior to elements in the DOM, consisting of Structural, Attribute and Component types. Components are a type of directive in Angular that allows utilizing web component functionality - encapsulated, reusable elements available throughout our application.
33. Difference between ngOnInit and ngAfterViewInit of Angular2.
ngOnInit is a life cycle hook called by Angular2 to indicate that Angular is done creating the component. ngAfterViewInit is also a lifecycle hook that is called after a component's view has been fully initialized.
34. Difference between Constructor and ngOnInit in Angular.
The Constructor of the class is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. Angular or better DI analyzes the constructor parameters and when it creates a new instance by...
35. What is a zone in Angular?
A Zone is an execution context that persists across async tasks and allows the creator of the zone to observe and control execution of the code within the zone. These execution contexts allow Angular to track the start and completion...
36. Can we use ngIf and ngFor on the same element in Angular?
No, Angular2 does not support more than one structural directive on the same element. You may use the element that allows you to use separate elements for each structural directive in a nested format.
37. What is router-link directive?
The RouterOutlet directive tells our router where to render the content in the view.
38. Difference between router-link and [router-link] with brackets.
Use brackets to pass a bindable property (a variable).
39. Explain Hot Module Replacement (HMR).
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development process.
40. What is webpack?
webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.
41. Difference between ng model and ng bind directives.
'ng-model' is an angular directive used for achieving two-way data binding. Any modifications to that model from the Scope/Controller will be automatically propagated to the view regardless of whether the view is asking for the updated data and any modifications...
42. What is forRoot and forChild method in angular?
The forRoot is a static method and it helps to configure the modules. For example, RouterModule.forRoot....
43. How do you create and register/provide service using ng CLI?
It is possible to provide the service when creating the service. When you create the service using NG CLI specify the module using (--module or -m) to provide as shown below.
44. Difference between declarations, providers, and import in NgModule.
imports makes the exported declarations of other modules available in the current module. declarations make directives (including components and pipes) from the current module available to other directives in the current module....
45. Explain pipes in Angular.
Angular pipes is a way to write display-value transformations that you can declare in your HTML. A pipe takes in data as input and transforms it into the desired output....
46. What is angular routing?
The Angular Router enables navigation from one view to the other as users perform application tasks. Angular router interpret a browser URL to navigate to a client-generated view....
47. How to check the Angular version installed?
For angular 4+, use one of the below commands. ng version, ng -v.
48. Explain the structure of Angular application projects.
For instance, take the structure of the Shopper Stop angular application. e2e folder holds end to end test cases that help ensure the angular components are working correctly....
49. What is angular CLI?
Angular CLI is a command line interface to scaffold and build angular apps. It provides a scalable project structure and also handles most of the task in building the application....
50. Elements of the Component decorator in Angular.
The Component decorator is an object with many properties such as, selector specifies the tag (html identifier) used to call this component in HTML templates as any standard HTML tags. templateUrl specifies HTML template path used to display this component....
51. Explain Angular services.
Services are a great way to share information among components/classes that don't know each other. Services can be injected into any component and it usually holds data/code providing data for one or more components....
52. How do I create a service as a singleton in Angular?
We can create a service as singleton in Angular in 2 ways: Declare that the service should be provided in the application root. This is done by setting providedIn to root on the service's @Injectable decorator as shown below....
53. What is service worker and its advantages in Angular?
Service worker is a script that runs in a web browser and manages cache of any web application. Angular applications are turned into progressive web application (PWA) after implementing service worker there by benefitted by, increased reliability and performance, eliminate...
54. How does *ngIf directive works?
ngIf directive does not show or hide an element from DOM. Instead, the ngIf directive removes or recreates a portion of the DOM tree based on the ngIf {expression}....
55. Difference between ng-class and ng-style directives.
ng-style is used to interpolate javascript object into style attribute. ng-style="{width: 10px}" The above directive will be translated to style="width:10px".
56. Difference between Component and template/templateURL.
In Angular as compared to MVC, a component acts as a controller/ViewModel while template represent the "view".
57. What is Ivy in Angular?
Ivy is the code name for Angular's next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.
58. Default view encapsulation model in Angular.
Emulated view encapsulation is the default encapsulation that emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view.
59. Types of directives in Angular.
There are 3 types of directives in Angular: Components , directives with a template. Structural directives , changes the DOM layout by adding and removing DOM elements....
60. What are structural directives in Angular?
Structual directives are responsible for HTML Layouts, reshaping DOM structure by dynamically adding and removing/manipulating elements. Structural directives have *(asterisk) preceding the attribute name and no square brackets nor parenthesis.
61. Difference between Structural and attribute directives.
Structural directive. Attribute directive....
62. What is <ng-template> in Angular?
The <ng-template> is an angular element for rendering HTML. It will never get displayed directly in the view.
63. Explain <ng-container> element in Angular.
The Angular <ng-container> is a grouping element that does NOT interfere with styles or layout because Angular doesn't put this element in the DOM. The <ng-container> is a syntax element recognized by the Angular parser....
64. Name a few builtin pipes in Angular that you are aware of.
Angular comes with builtin pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe.
65. What are the different types of Pipes in Angular?
There are 2 types of pipes: pure and impure . Pipes are pure by default....
66. What is JsonPipe?
JsonPipe is an inbuilt pipe that converts a value/object into its JSON-format representation. It is usually used for debugging....
67. What are the methods in Angular FormBuilder?
The FormBuilder service is an injectable provider that is provided with the reactive forms module. The FormBuilder service has 3 methods: control(), group() , and array() ....
68. What is ngForm directive?
The NgForm directive powers the form element with additional features. It holds the controls you created for the elements with a ngModel directive and name attribute, monitors their properties and its validity....
69. What are the child classes of AbstractControl?
AbstractControl is the base class for FormControl, FormGroup, and FormArray.
70. Difference between Promises and Observable.
Promise. Observable....
71. What is NGModule?
An NgModule describes how the application components fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application....
72. Can a Angular component be declared in multiple modules?
No . A component can be declared only in one module and that module be reused by importing it.
73. Design a game using Angular in which the user should click on the highlighted area to score before it vanishes. Also, it should display score with different levels like easy/medium/difficult.
pleae find the game app in stackbliz .
74. What is tree shaking in Angular?
Tree shaking is a step as part of the build process in which eliminates/drops code in your project that are not used/referenced anywhere.
75. What defines an Angular view?
A Angular components and its HTML template together defines an Angular view
76. Difference between a view, a host view, and an embedded view.
Each component along with its template in Angular is represented as a view. The embedded view is a view that is created for the view nodes specified in the ng-template....
77. Difference between createEmbeddedView and createComponent in Angular.
createEmbeddedView is used to create a view using TemplateRef. TemplateRef is created by Angular compiler when it encounters ng-template tag in your component HTML....
78. Various forms of data binding markup in Angular.
There are 4 forms. {{value}}, [property]="value", (event)="handler", [(ng-model)] ="property".
79. Is ngModel an attribute directive?
Yes. ngModel modifies the behavior of an existing element by setting its display value property and responding to change events.
80. Mention a few roles of Services in Angular.
Service fetch data from server, also it can be used to validate user inputs.
81. How do I make a parent component listen for child events?
The parent component may bind to the EventEmitter property of child that emit events and react to those events. The child's EventEmitter property is an output property decorated with @Output() .
82. What is the difference between CSS and SCSS?
CSS is the styling language that any browser understands to style webpages. SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser....
83. What is router outlet in Angular?
The RouterOutlet is a directive from the router library used as a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet....
84. What are angular guards?
Guards in Angular are like components that gets executed before the route is loaded or the ones leaving the route. Guards help protect the route.
85. Mention a few drawbacks (disadvantages) of using Angular.
Steep learning curve required. Performance may be concern in complex SPA applications.
86. What is Angular Universal or Angular SSR?
Angular Universal also known as Angular SSR (Server side rendering) is a technology that renders Angular applications on the server. A regular Angular application executes in the browser, rendering pages in the DOM in response to user actions....
87. Explain index signature in typescript.
Index signatures are used to define objects that is used as dictionaries. interface KeyMap { [ key: string ] : number; } keyMap : KeyMap = {}; keyMap [ ' key1 ' ] = 4 ;
88. Can we consume SOAP web service with Angular Application?
Yes. ngx-soap npm library we can access SOAP web services using Angular application....
89. Key features of IndexedDB.
IndexedDB databases store key-value pairs. IndexedDB is built on a transactional database model....
90. What is Web worker in Angular?
Web workers allow you to run CPU-intensive computations in a background thread, freeing the main thread to update the user interface. If you find your application performs a lot of computations, such as image processing, looped mathematical calculations, using web...
91. How do you handle right-click event on a DIV in Angular?
Use the "contextMenu" handler as shown in the below code. <div (contextmenu)="onrightClick($event)" > right click me!
92. How do you handle double-click in Angular?
Use dblclick event handler. <a (click)="method1()" (dblclick)="method2()" >
93. What is a nested route in Angular?
In a real-world complex application, you may want to create routes that are relative to a component other than your root component. These types of nested routes are called child routes....
94. Types of LocationStrategy in Angular routes.
The router supports both styles with two LocationStrategy providers. PathLocationStrategy , the default "HTML5 pushState" style, a LocationStrategy used to configure the Location service to represent its state in the path of the browser's URL....
95. Difference between RouterModule.forRoot() and forChild().
There are two methods we can invoke using RouterModule in order to register routes: forRoot, and forChild. The forRoot() method creates a NgModule that contains all the directives, the given routes, and the Router service itself....
96. What is APP_INITIALIZER in Angular?
APP_INITIALIZER register listeners for the Angular bootstrap process which serves as hooks during Application initialization. This way we can use such hooks to subscribe to the application bootstrap process and perform our initialization logic....
97. Advantages of SCSS over CSS?
SCSS is full of advanced features, SCSS offers variables which you can use to shorten your code. It is a great advantage over conventional CSS.
98. Why do we need to use Angular?
Angular is a JavaScript Binding framework that binds the HTML UI and Javascript Model. This helps you to reduce your effort on writing those long lines of code for binding....
99. Difference between AngularJS vs Angular.
AngularJS Angular Versions (1.x) 2, 4, 5, 6,7,8, 9 and 10 Language JavaScript TypeScript Architecture Controller Component Mobile compliant No Yes CLI No Yes Lazy loading No Yes SEO No Yes Server side No Yes
100. Types of Angular directives.
The different types of Angular directives are as follows: Components - directives with a template. This type of directive is the most common directive type....
101. Explain the importance of NPM and node_modules folder?
NPM is a package manager which makes the installation of JavaScript framwork and packages easy. "node_modules" is the folder where the packages are installed.
102. What is the package.json file in Angular?
package.json file has all the JavaScript references needed for a project. So rather than installing one package at a time we can install all packages in one go.
103. What is typescript and why do we need it?
Typescript is a superset of Javascript and adds types to the language. It gives a nice Object-oriented programming environment which transpiles/converts to JavaScript.It is strongly typed so we will have less type errors.
104. What is schematics in Angular?
A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
105. Explain the importance of Components and Modules?
Components is where you write your binding code. Module logically groups components.
106. What is Decorator in Angular?
Decorator defines what kind of Angular class is it. For example, if you decorate "@Component" then it says the class is an Angular component, if you specify as "@NGModule" it becomes Angular module.
107. What is metadata/annotation in Angular.
This is nothing but Angular decorators such as @Component and @NgModule.
108. What is a template in Angular?
Template is an HTML view of Angular in which we can write directives. There are 2 ways of defining template, inline and separate HTML file.
109. Different types of data binding in Angular.
There are 4 types. expression/Interpolation binding {{}}, for example {{cust.customerName}} property binding [], [(ngModel)] = "cust.customerId" event binding (), for example, (click) = "toggle()" two way binding [()] , in this case, data from controller to view is passed and...
110. What is SPA in Angular?
SPA stands for Single Page Application. Single Page Application are applications where the main UI gets loaded once and then the needed UI is loaded on demand.
111. How to detect when an @Input() value changes in Angular?
Actually, there are two ways of detecting and acting upon when an input changes in the child component in angular. Use the ngOnChanges() lifecycle method....
112. What are PWAs?
Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps. PWAs provide a number of advantages to users -...
113. What is the Jasmine test framework?
Jasmine is a JavaScript testing framework that supports a software development practice called Behaviour-Driven Development, or BDD for short. Its a specific flavour of Test-Driven Development (TDD)....
114. What is Setup and Teardown in Jasmine?
Sometimes in order to test a feature we need to perform some setup, perhaps it's creating some test objects. Also, we may need to perform some cleanup activities after we have finished testing, perhaps we need to delete some files...
115. What is Karma in Angular testing?
Karma is a task runner for our tests. It uses a configuration file in order to set the startup file, the reporters, the testing framework, the browser among other things.
116. What is the use of the Protractor framework in Angular?
Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
117. Explain the purpose of SubSink in Angular.
SubSink help manage multiple subscriptions. SubSink is a simple class to absorb RxJS subscriptions in an array....
118. What is NgRx?
NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for: Managing global and local state....
119. Can we do two way binding without ngModel? If so, how?
<input [value]="title" (input)=" title= $event.target.value" >
120. What are HostListener and HostBinding?
@HostListener() function decorator allows you to handle the events of the host element in the directive class. @HostBinding() function decorator allows you to set the properties of the host element.
121. Why using ElementRef is not recommended?
Permitting direct access to the DOM can make your application vulnerable to XSS attacks. Direct access to native elements is not supported in the case of web workers.
122. What is Angular Unit Testing?
Angular Unit Testing is used to test individual components of the applications. It is performed by using Karma and Jasmine....
123. How does code coverage work in angular 7?
The CLI can run unit tests and create code coverage reports. Code coverage reports show you any parts of our code base that may not be properly tested by your unit tests....
124. What is single component Angular modules (SCAM)?
SCAMs (single component Angular modules) are Angular modules that are scoped to a single declarable. For directives and pipes, they declare and export a single declarable.
