backend/Data/angular.txt

Core Basics

1. What is Angular Framework?
Angular is a TypeScript-based open-source framework by Google for building scalable, dynamic single-page applications (SPAs). It provides tools for UI, routing, services, and reactive programming.

2. What is the difference between AngularJS and Angular?
AngularJS (v1.x) is JavaScript-based with MVC pattern, while Angular (v2+) uses TypeScript, component-based architecture, and has better performance and modularity.

3. What is TypeScript?
TypeScript is a superset of JavaScript with static typing, classes, and interfaces, providing better tooling and maintainability.

4. Write a pictorial diagram of Angular architecture?
Angular architecture = Modules → Components/Templates → Directives → Services & DI → Routing → Compiler/Renderer.

5. What are the key components of Angular?
Modules, Components, Templates, Metadata, Data Binding, Directives, Services, Dependency Injection.

6. What are directives?
Directives are instructions that tell Angular how to manipulate the DOM (e.g., *ngIf, *ngFor, custom directives).

7. What are components?
Components are UI building blocks that combine HTML template, CSS, and TypeScript logic.

8. What are the differences between Component and Directive?
Components have a template and control a UI view, while directives only change DOM behavior/appearance.

9. What is a template?
A template is the HTML view of a component that includes bindings and Angular syntax.

10. What is a module?
A module (NgModule) groups related components, directives, pipes, and services into a functional block.

Lifecycle & Binding

11. What are lifecycle hooks available?
Common hooks: ngOnInit, ngOnChanges, ngDoCheck, ngAfterViewInit, ngAfterContentInit, ngOnDestroy.

12. What is a data binding?
Data binding connects component class data with template DOM elements.

13. What is metadata?
Metadata provides Angular with configuration info using decorators like @Component or @NgModule.

14. What is Angular CLI?
Angular CLI is a command-line tool to create, build, test, and deploy Angular apps.

15. What is the difference between constructor and ngOnInit?
Constructor is a TypeScript feature for class initialization, while ngOnInit is Angular’s lifecycle hook after inputs are set.

16. What is a service?
A service is a reusable class that provides business logic or data access, sharable across components.

17. What is dependency injection in Angular?
DI lets Angular automatically provide services to components or classes that declare them as dependencies.

18. How is Dependency Hierarchy formed?
Services form a hierarchical injector tree: root-level services are shared, while component-level can be isolated.

19. What is the purpose of async pipe?
The async pipe subscribes to observables/promises and renders latest values, auto-unsubscribing when destroyed.

20. What is the option to choose between inline and external template file?
Use template: for inline templates and templateUrl: for external HTML templates.

Structural Directives

*21. What is the purpose of ngFor directive?
*ngFor repeats an element for each item in a collection.

22. What is the purpose of ngIf directive?
ngIf conditionally adds/removes elements from the DOM.

23. What happens if you use script tag inside template?
It’s ignored for security reasons; Angular blocks script tags inside templates.

24. What is interpolation?
Interpolation binds component properties into template expressions using {{ }} syntax.

25. What are template expressions?
Template expressions are short JavaScript-like code snippets that return a value for binding.

26. What are template statements?
Template statements respond to user events like clicks, usually with event binding (event)="handler()".

27. How do you categorize data binding types?
Types: Interpolation, Property Binding, Event Binding, and Two-Way Binding.

Pipes

28. What are pipes?
Pipes transform displayed data in templates (e.g., date, uppercase).

29. What is a parameterized pipe?
A pipe with arguments (e.g., date:'short').

30. How do you chain pipes?
By using | operator in sequence (e.g., {{ value | date | uppercase }}).

31. What is a custom pipe?
A user-defined pipe for custom data transformation.

32. Give an example of custom pipe?
Example: @Pipe({name:'reverse'}) to reverse strings.

33. What is the difference between pure and impure pipe?
Pure pipes execute only when input changes, impure pipes run on every change detection cycle.

Bootstrapping

34. What is a bootstrapping module?
The root NgModule (often AppModule) that bootstraps the Angular application.

35. What are observables?
Observables are RxJS streams that emit multiple values over time asynchronously.

36. What is HttpClient and its benefits?
HttpClient is Angular’s API for HTTP requests with support for observables, interceptors, and typed responses.

37. Explain on how to use HttpClient with an example?
Import HttpClientModule, inject HttpClient, then call http.get('/api/data').

38. How can you read full response?
Use {observe: 'response'} to access headers, status, and body.

39. How do you perform Error handling?
Use RxJS operators like catchError inside an observable chain.

RxJS & Observables

40. What is RxJS?
RxJS is a library for reactive programming using observables.

41. What is subscribing?
Subscribing listens to an observable to receive emitted values.

42. What is an observable?
An observable is a data stream that emits values asynchronously.

43. What is an observer?
Observer defines handlers (next, error, complete) for observable notifications.

44. What is the difference between promise and observable?
Promise handles one async value, observable handles multiple values over time.

45. What is multicasting?
Multicasting shares a single observable execution among multiple subscribers.

46. How do you perform error handling in observables?
Use catchError, retry, or onErrorResumeNext.

47. What is the shorthand notation for subscribe method?
Pass functions directly: subscribe(val => ..., err => ..., () => ...).

48. What are the utility functions provided by RxJS?
Examples: map, filter, merge, concat, debounce, take.

49. What are observable creation functions?
Functions like of(), from(), interval(), timer(), fromEvent().

50. What will happen if you do not supply handler for the observer?
Nothing happens; observable runs but values are ignored.

Angular Elements

51. What are Angular elements?
Angular elements are Angular components packaged as custom elements (Web Components).

52. What is the browser support of Angular Elements?
Supported in modern browsers with polyfills for older ones.

53. What are custom elements?
Custom elements are web components with custom-defined HTML tags.

54. Do I need to bootstrap custom elements?
No, they bootstrap automatically when added to DOM.

55. Explain how custom elements works internally?
Angular wraps component logic into a native custom element via Angular Elements API.

56. How to transfer components to custom elements?
Use createCustomElement() from @angular/elements.

57. What are the mapping rules between Angular component and custom element?
Inputs → Attributes/properties, Outputs → DOM events.

58. How do you define typings for custom elements?
Declare them in custom-elements.d.ts

Dynamic & Customization

59. What are dynamic components?
Dynamic components are created and loaded at runtime using ComponentFactoryResolver or Angular CDK APIs.

60. What are the various kinds of directives?
Directives are of three types: Components, Structural Directives (*ngIf, *ngFor), and Attribute Directives (ngClass, ngStyle).

61. How do you create directives using CLI?
Use the command: ng generate directive directive-name.

62. Give an example for attribute directives?
Example: ngStyle changes element styles dynamically based on conditions.

Angular Router

63. What is Angular Router?
Angular Router enables navigation between views/components in an application.

64. What is the purpose of base href tag?
<base href="/"> defines the base path for resolving relative URLs in routing.

65. What are the router imports?
Common imports: RouterModule, Routes, and ActivatedRoute.

66. What is router outlet?
<router-outlet> is a placeholder in templates where routed components load.

67. What are router links?
Router links (routerLink) define navigation paths within the app.

68. What are active router links?
routerLinkActive applies CSS classes when the link’s route is active.

69. What is router state?
Router state is a tree structure of all active routes and parameters.

70. What are router events?
Events like NavigationStart, NavigationEnd, GuardsCheck, and Resolve events track router lifecycle.

71. What is activated route?
ActivatedRoute provides access to the current route’s parameters, data, and URL.

72. How do you define routes?
Use a Routes array with {path: 'url', component: Component} inside RouterModule.forRoot().

73. What is the purpose of Wildcard route?
A wildcard route (**) catches undefined paths and usually redirects to a “Not Found” page.

74. Do I need a Routing Module always?
Not mandatory; for small apps routes can be defined directly in AppModule.

Compilation

75. What is Angular Universal?
Angular Universal enables server-side rendering of Angular apps for better SEO and performance.

76. What are different types of compilation in Angular?
Just-in-Time (JIT) and Ahead-of-Time (AOT).

77. What is JIT?
JIT compiles templates in the browser at runtime, useful in development.

78. What is AOT?
AOT compiles templates at build time for faster load and better security.

79. Why do we need compilation process?
Compilation converts Angular templates into efficient JavaScript for rendering in the browser.

80. What are the advantages with AOT?
Faster rendering, smaller bundles, early template errors, and better security.

81. What are the ways to control AOT compilation?
Configure in angular.json with "aot": true or use ng build --aot.

82. What are the restrictions of metadata?
Metadata must be statically analyzable; functions or dynamic values aren’t allowed.

83. What are the three phases of AOT?
Code Analysis, Code Generation, and Template Type Checking.

84. Can I use arrow functions in AOT?
Not in decorators; only standard function references are allowed.

85. What is the purpose of metadata json files?
They store information about compiled Angular libraries for reuse.

86. Can I use any JavaScript feature for expression syntax in AOT?
No, only limited, statically analyzable expressions are supported.

87. What is folding?
Folding evaluates constant expressions during compilation to optimize code.

88. What are macros?
Macros are custom functions or constants expanded during compilation.

89. Give an example of few metadata errors?
Examples: Function calls in decorators, circular dependencies, or unsupported expressions.

90. What is metadata rewriting?
Angular compiler transforms metadata to improve optimization and correctness.

Template Compiler

91. How do you provide configuration inheritance?
Use tsconfig.app.json extending from a base tsconfig.json.

92. How do you specify angular template compiler options?
Add options under "angularCompilerOptions" in tsconfig.json.

93. How do you enable binding expression validation?
Enable "fullTemplateTypeCheck": true in angularCompilerOptions.

94. What is the purpose of any type cast function?
It tells Angular compiler to treat an expression as a specific type.

95. What is Non null type assertion operator?
The ! operator asserts a value is non-null or non-undefined.

96. What is type narrowing?
Type narrowing refines a variable’s type based on conditional checks.

97. How do you describe various dependencies in angular application?
Dependencies are services, providers, and modules injected into components/classes.

Zones & Common Module

98. What is zone?
Zone.js patches async APIs to track tasks and trigger Angular change detection.

99. What is the purpose of common module?
CommonModule provides common directives like *ngIf and *ngFor in feature modules.

100. What is codelyzer?
Codelyzer is a static analysis tool that checks Angular coding guidelines.

Animations

101. What is angular animation?
Angular Animations provide declarative APIs for state transitions and visual effects.

102. What are the steps to use animation module?
Import BrowserAnimationsModule, define triggers with @Component, and bind in templates.

103. What is State function?
state() defines a named style configuration for an animation.

104. What is Style function?
style() defines CSS styles applied during animations.

105. What is the purpose of animate function?
animate() specifies duration and easing for animation transitions.

106. What is transition function?
transition() defines the state changes that trigger animations.

107. How to inject the dynamic script in angular?
Use Renderer2 or plain DOM APIs in Angular services/components.

Service Workers

108. What is a service worker and its role in Angular?
A service worker is a script that enables offline caching, background sync, and push notifications.

109. What are the design goals of service workers?
Goals: offline experience, fast load, background tasks, and resource caching.

110. What are the differences between AngularJS and Angular with respect to dependency injection?
AngularJS uses a string-based DI system, Angular uses TypeScript classes and hierarchical injectors.

Ivy Engine

111. What is Angular Ivy?
Ivy is Angular’s next-generation rendering engine for faster compilation and smaller bundles.

112. What are the features included in ivy preview?
Features: smaller bundle size, faster builds, better debugging, lazy loading of components.

113. Can I use AOT compilation with Ivy?
Yes, Ivy supports AOT fully and improves its speed.

Angular Language Service

114. What is Angular Language Service?
A tool that provides autocompletion, error checking, and hints inside Angular templates.

115. How do you install angular language service in the project?
Install @angular/language-service via npm and configure in IDE.

116. Is there any editor support for Angular Language Service?
Yes, supported in VS Code, WebStorm, and Angular IDE.

117. Explain the features provided by Angular Language Service?
Features: template autocomplete, diagnostics, navigation, and type-checking.

Web Workers

118. How do you add web workers in your application?
Use ng generate web-worker <name> and configure messaging between worker and app.

119. What are the limitations with web workers?
No direct DOM access; limited APIs; adds complexity for debugging.

Builders

120. What is Angular CLI Builder?
A builder is a function that defines custom build, test, or deploy tasks in Angular CLI.

Builders & App Shell

121. What is a builder?
A builder is a function in Angular CLI that performs a task like build, test, or lint.

122. How do you invoke a builder?
By running Angular CLI commands (ng run <project>:<builder>).

123. How do you create app shell in Angular?
Use ng generate app-shell to set up server-side rendering for faster initial load.

Naming Conventions

124. What are the case types in Angular?
CamelCase, PascalCase, kebab-case, and snake_case are used depending on context (e.g., selectors vs class names).

Decorators

125. What are the class decorators in Angular?
Examples: @Component, @Directive, @NgModule, @Injectable.

126. What are class field decorators?
Examples: @Input, @Output, @ViewChild, @ContentChild.

127. What is declarable in Angular?
Declarables are classes that can be declared in NgModules: components, directives, pipes.

128. What are the restrictions on declarable classes?
They must belong to exactly one NgModule and cannot be services or modules.

129. What is a DI token?
A DI token is a key used by Angular’s injector to map dependencies (class types, strings, or InjectionToken).

130. What is Angular DSL?
Angular DSL refers to Angular’s template syntax as a domain-specific language.

RxJS Subject

131. What is an rxjs Subject?
A Subject is both an observable and an observer, useful for multicasting values.

Bazel

132. What is Bazel tool?
Bazel is Google’s build tool used for scalable and incremental builds.

133. What are the advantages of Bazel tool?
Faster builds, caching, parallelization, and reproducible results.

134. How do you use Bazel with Angular CLI?
Install @angular/bazel and configure CLI to use Bazel builder.

135. How do you run Bazel directly?
Run bazel build //src:target commands in the project.

Platform

136. What is platform in Angular?
A platform initializes an Angular app in a specific environment (browser, server, worker).

137. What happens if I import the same module twice?
It’s ignored if imported in the same injector tree; but may cause multiple instances if in different injectors.

Component Template

138. How do you select an element within a component template?
Use @ViewChild or @ViewChildren to query elements or components.

139. How do you detect route change in Angular?
Subscribe to Router.events or use ActivatedRoute observables.

140. How do you pass headers for HTTP client?
Use HttpHeaders in request options: { headers: new HttpHeaders({'key':'value'}) }.

CLI & Loading

141. What is the purpose of differential loading in CLI?
It creates separate bundles for modern and legacy browsers for optimized performance.

142. Does Angular support dynamic imports?
Yes, with import() syntax for lazy-loaded modules.

143. What is lazy loading?
Lazy loading loads feature modules only when needed, improving performance.

144. What are workspace APIs?
They allow programmatic access to Angular workspace configuration files.

145. How do you upgrade angular version?
Use ng update @angular/core @angular/cli.

Angular Material

146. What is Angular Material?
A UI component library that implements Google’s Material Design.

Upgrade

147. How do you upgrade location service of angularjs?
Use UpgradeModule to bridge AngularJS $location with Angular’s Location service.

148. What is NgUpgrade?
A library that allows AngularJS and Angular to coexist during migration.

Testing

149. How do you test Angular application using CLI?
Use ng test (Jasmine + Karma) or ng e2e (Protractor).

Polyfills

150. How to use polyfills in Angular application?
Add necessary imports in polyfills.ts for cross-browser compatibility.

Change Detection

151. What are the ways to trigger change detection in Angular?
Automatically via Zone.js, or manually using ChangeDetectorRef and NgZone.

Versions

152. What are the differences of various versions of Angular?
AngularJS (1.x) vs Angular 2+ (rewritten, TS-based); later versions improve performance, Ivy, RxJS, CLI features.

Security

153. What are the security principles in angular?
Principles: Avoid direct DOM, sanitize untrusted data, use Angular templates safely.

154. What is the reason to deprecate Web Tracing Framework?
Due to low usage and overlap with browser dev tools.

155. What is the reason to deprecate web worker packages?
They were replaced by modern CLI support for Web Workers.

CLI & Browser

156. How do you find angular CLI version?
Run ng version in terminal.

157. What is the browser support for Angular?
Latest versions of Chrome, Firefox, Edge, Safari, and evergreen browsers.

Schematics

158. What is schematic?
Schematics automate code generation and transformations in Angular projects.

159. What is rule in Schematics?
A Rule is a function that takes a Tree (file system) and applies transformations.

160. What is Schematics CLI?
A tool (schematics) to run and create schematics manually.

Security (continued)

161. What are the best practices for security in angular?
Avoid innerHTML, sanitize inputs, use route guards, secure APIs with HTTPS.

162. What is Angular security model for preventing XSS attacks?
Angular automatically escapes template expressions and sanitizes dangerous values.

163. What is the role of template compiler for prevention of XSS attacks?
It ensures only safe expressions and bindings are allowed.

164. What are the various security contexts in Angular?
HTML, Style, Script, URL, ResourceURL contexts.

165. What is Sanitization? Does Angular support it?
Sanitization removes unsafe content; Angular supports it via DomSanitizer.

166. What is the purpose of innerHTML?
It sets raw HTML content inside an element.

167. What is the difference between interpolated content and innerHTML?
Interpolation auto-sanitizes values, while innerHTML may allow unsafe HTML.

168. How do you prevent automatic sanitization?
Use DomSanitizer.bypassSecurityTrust...() methods.

169. Is it safe to use direct DOM API methods in terms of security?
No, prefer Angular’s Renderer2 for safe DOM manipulation.

170. What is DOM sanitizer?
A service that sanitizes untrusted values for safe DOM usage.

171. How do you support server side XSS protection in Angular application?
Validate and sanitize data on the server as well.

172. Does Angular prevent HTTP level vulnerabilities?
No, developers must secure APIs with HTTPS, CORS, and headers.

HTTP Interceptors

173. What are Http Interceptors?
Interceptors intercept HTTP requests/responses for tasks like auth, logging, or error handling.

174. What are the applications of HTTP interceptors?
Add headers, handle errors, cache responses, modify requests.

175. Are multiple interceptors supported in Angular?
Yes, interceptors are chainable in order of provider configuration.

176. How can I use interceptor for an entire application?
Provide it in root AppModule under HTTP_INTERCEPTORS.

Internationalization (i18n)

177. How does Angular simplify Internationalization?
With i18n tags, translation files, and Angular CLI tools.

178. How do you manually register locale data?
Import locale from @angular/common/locales and register with registerLocaleData().

179. What are the four phases of template translation?
Extraction, Translation, Merging, and Deployment.

180. What is the purpose of i18n attribute?
The i18n attribute marks text for translation extraction.

Internationalization (i18n) continued

181. What is the purpose of custom id?
A custom id uniquely identifies translation strings for easier management.

182. What happens if the custom id is not unique?
Conflicts occur, leading to wrong translations being applied.

183. Can I translate text without creating an element?
Yes, by using <ng-container i18n>Text</ng-container>.

184. How can I translate attribute?
Apply the i18n-attr syntax, e.g., <input placeholder="..." i18n-placeholder>.

185. List down the pluralization categories?
Categories: zero, one, two, few, many, other.

186. What is select ICU expression?
It’s used for conditional text rendering based on a value (like gender).

187. How do you report missing translations?
Configure "missingTranslation": "error|warning|ignore" in Angular compiler options.

188. How do you provide build configuration for multiple locales?
Set up "localize" in angular.json with configurations per locale.

Angular Libraries

189. What is an angular library?
A reusable set of Angular components, directives, and services packaged for distribution.

190. What is AOT compiler?
AOT compiler pre-compiles Angular templates and components at build time.

Component Template

191. How do you select an element in component template?
Use @ViewChild/@ViewChildren decorators to query template elements.

Testing

192. What is TestBed?
TestBed is Angular’s primary API for unit testing components and services.

193. What is protractor?
Protractor is an end-to-end testing framework built on WebDriverJS.

Schematics

194. What is collection?
A collection is a set of related schematics packaged together.

195. How do you create schematics for libraries?
Use schematics CLI to define rules for code generation in Angular libraries.

jQuery & Errors

196. How do you use jquery in Angular?
Install jQuery via npm and import it into components or use it via declare var $: any;.

197. What is the reason for No provider for HTTP exception?
Occurs when HttpClientModule isn’t imported in the app module.

Routing (again)

198. What is router state?
Router state is a tree representation of active routes, parameters, and data.

Styling

199. How can I use SASS in angular project?
Set "style": "scss" in angular.json and use .scss files.

200. What is the purpose of hidden property?
It hides an element from the DOM visually but doesn’t remove it.

201. What is the difference between ngIf and hidden property?
ngIf removes/adds elements from the DOM, hidden just toggles CSS visibility.

Pipes & Directives

202. What is slice pipe?
It creates a subarray or substring (like JavaScript slice()).

203. What is index property in ngFor directive?
It provides the loop index of the current item.

204. What is the purpose of ngFor trackBy?
trackBy optimizes re-rendering by uniquely tracking items.

205. What is the purpose of ngSwitch directive?
It conditionally renders elements based on a matching case value.

206. Is it possible to do aliasing for inputs and outputs?
Yes, using @Input('aliasName') and @Output('aliasName').

207. What is safe navigation operator?
The ?. operator avoids errors by checking null/undefined before property access.

Angular 9 & Template Expressions

208. Is any special configuration required for Angular9?
No, Ivy is enabled by default, simplifying configuration.

209. What are type safe TestBed API changes in Angular9?
TestBed now enforces type safety for component and service testing.

210. Is mandatory to pass static flag for ViewChild?
Yes in Angular 8, but optional in Angular 9+ with Ivy.

211. What are the list of template expression operators?
Operators: |, ?., !, ?:, and ??.

212. What is the precedence between pipe and ternary operators?
Pipe (|) has lower precedence, so ternary (?:) executes first.

Components

213. What is an entry component?
A component not in a template but loaded dynamically.

214. What is a bootstrapped component?
The root component that Angular loads at startup.

215. How do you manually bootstrap an application?
Call platformBrowserDynamic().bootstrapModule(AppModule).

216. Is it necessary for bootstrapped component to be entry component?
Yes, because it’s dynamically loaded at application startup.

217. What is a routed entry component?
A component loaded via router configuration.

218. Why is not necessary to use entryComponents array every time?
With Ivy, Angular auto-detects dynamically used components.

219. Do I still need to use entryComponents array in Angular9?
No, Ivy removes the need for manual entryComponents configuration.

220. Is it all components generated in production build?
Yes, unused ones are tree-shaken out.

Compiler & Modules

221. What is Angular compiler?
It translates Angular templates into JavaScript instructions for rendering.

222. What is the role of ngModule metadata in compilation process?
It declares which components, directives, and pipes belong to a module.

223. How does angular finds components, directives and pipes?
By scanning NgModule declarations and imports.

224. Give few examples for NgModules?
AppModule, FormsModule, HttpClientModule, RouterModule.

225. What are feature modules?
Modules that organize related functionality (e.g., UserModule).

226. What are the imported modules in CLI generated feature modules?
Usually CommonModule, FormsModule, and RouterModule.

227. What are the differences between ngmodule and javascript module?
NgModules define Angular app context, while JavaScript modules just export/import code.

228. What are the possible errors with declarations?
Duplicate declarations, missing imports, or declaring non-declarable classes.

229. What are the steps to use declaration elements?
Declare in NgModule → Import required modules → Use in templates.

230. What happens if browserModule used in feature module?
It causes errors; only AppModule should import BrowserModule.

231. What are the types of feature modules?
Feature, Routing, Shared, and Core modules.

Providers

232. What is a provider?
A provider configures how Angular creates or delivers a dependency.

233. What is the recommendation for provider scope?
Provide services in root (providedIn: 'root') unless scoping is needed.

234. How do you restrict provider scope to a module?
Declare it in that module’s providers array.

235. How do you provide a singleton service?
Use providedIn: 'root' or ensure only AppModule imports the provider.

236. What are the different ways to remove duplicate service registration?
Use forRoot() patterns, providedIn, or shared modules without providers.

237. How does forRoot method helpful to avoid duplicate router instances?
It ensures the service is only loaded once at the root level.

238. What is a shared module?
A module that exports common components, directives, and pipes for reuse.

239. Can I share services using modules?
Yes, but scope carefully to avoid duplicates.

240. How do you get current direction for locales?
Use getLocaleDirection() from @angular/common.