|
1 | 1 | # Angular Interview Questions & Answers
|
2 | 2 |
|
3 |
| -> Click :star:if you like the project and follow [@SudheerJonna](https://twitter.com/SudheerJonna) for technical updates. |
| 3 | +> Click :star: if you like the project and follow [@SudheerJonna](https://twitter.com/SudheerJonna) for technical updates. |
4 | 4 |
|
5 | 5 | ---
|
6 | 6 |
|
7 | 7 | <p align="center">
|
8 |
| - <a href=https://zerotomastery.io/?utm_source=github&utm_medium=sponsor&utm_campaign=angular-interview-questions> |
9 |
| - <img src=https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=height:70/https://www.filepicker.io/api/file/AKYtjj5SSGyJuyZrkAB2 alt="ZTM Logo" width="100" height="50"> |
| 8 | + <a href="https://zerotomastery.io/?utm_source=github&utm_medium=sponsor&utm_campaign=angular-interview-questions"> |
| 9 | + <img src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=height:70/https://www.filepicker.io/api/file/AKYtjj5SSGyJuyZrkAB2" alt="ZTM Logo" width="100" height="50"> |
10 | 10 | </a>
|
11 | 11 | <p align="center">
|
12 | 12 | <ol>
|
13 |
| - <li>Take this <a href=https://links.zerotomastery.io/angular_sudheer>Angular course</a> to go from a complete Angular beginner to confidently building enterprise-level applications from scratch</li> |
14 |
| - <li>Take this <a href=https://links.zerotomastery.io/mci_sudheer3>coding interview bootcamp</a> if you’re serious about getting hired and don’t have a CS degree</li> |
| 13 | + <li>Take this <a href="https://links.zerotomastery.io/angular_sudheer">Angular course</a> to go from a complete Angular beginner to confidently building enterprise-level applications from scratch</li> |
| 14 | + <li>Take this <a href="https://links.zerotomastery.io/mci_sudheer3">coding interview bootcamp</a> if you're serious about getting hired and don't have a CS degree</li> |
15 | 15 | </ol>
|
16 | 16 | </p>
|
17 | 17 | </p>
|
|
163 | 163 | |139| [How do you detect route change in Angular?](#how-do-you-detect-route-change-in-angular)|
|
164 | 164 | |140| [How do you pass headers for HTTP client?](#how-do-you-pass-headers-for-http-client)|
|
165 | 165 | |141| [What is the purpose of differential loading in CLI?](#what-is-the-purpose-of-differential-loading-in-cli)|
|
166 |
| -|142| [Is Angular supports dynamic imports?](#is-angular-supports-dynamic-imports)| |
| 166 | +|142| [Does Angular support dynamic imports?](#does-angular-support-dynamic-imports)| |
167 | 167 | |143| [What is lazy loading?](#what-is-lazy-loading)|
|
168 | 168 | |144| [What are workspace APIs?](#what-are-workspace-apis)|
|
169 | 169 | |145| [How do you upgrade angular version?](#how-do-you-upgrade-angular-version)|
|
|
186 | 186 | |162| [What is Angular security model for preventing XSS attacks?](#what-is-angular-security-model-for-preventing-xss-attacks)|
|
187 | 187 | |163| [What is the role of template compiler for prevention of XSS attacks?](#what-is-the-role-of-template-compiler-for-prevention-of-xss-attacks)|
|
188 | 188 | |164| [What are the various security contexts in Angular?](#what-are-the-various-security-contexts-in-Angular)|
|
189 |
| -|165| [What is Sanitization? Is angular supports it?](#what-is-sanitization?Is-angular-supports-it)| |
| 189 | +|165| [What is Sanitization? Does Angular support it?](#what-is-sanitization-does-angular-support-it)| |
190 | 190 | |166| [What is the purpose of innerHTML?](#what-is-the-purpose-of-innerhtml)|
|
191 | 191 | |167| [What is the difference between interpolated content and innerHTML?](#what-is-the-difference-between-interpolated-content-and-innerhtml)|
|
192 | 192 | |168| [How do you prevent automatic sanitization?](#how-do-you-prevent-automatic-sanitization)|
|
193 |
| -|169| [Is safe to use direct DOM API methods in terms of security?](#is-safe-to-use-direct-dom-api-methods-in-terms-of-security)| |
| 193 | +|169| [Is it safe to use direct DOM API methods in terms of security?](#is-it-safe-to-use-direct-dom-api-methods-in-terms-of-security)| |
194 | 194 | |170| [What is DOM sanitizer?](#what-is-dom-sanitizer)|
|
195 | 195 | |171| [How do you support server side XSS protection in Angular application?](#how-do-you-support-server-side-xss-protection-in-angular-application)
|
196 |
| -|172| [Is angular prevents http level vulnerabilities?](#is-angular-prevents-http-level-vulnerabilities)| |
| 196 | +|172| [Does Angular prevent HTTP level vulnerabilities?](#does-angular-prevent-http-level-vulnerabilities)| |
197 | 197 | |173| [What are Http Interceptors?](#what-are-http-interceptors)|
|
198 | 198 | |174| [What are the applications of HTTP interceptors?](#what-are-the-applications-of-http-interceptors)|
|
199 |
| -|175| [Is multiple interceptors supported in Angular?](#is-multiple-interceptors-supported-in-angular)| |
| 199 | +|175| [Are multiple interceptors supported in Angular?](#are-multiple-interceptors-supported-in-angular)| |
200 | 200 | |176| [How can I use interceptor for an entire application?](#how-can-i-use-interceptor-for-an-entire-application)|
|
201 |
| -|177| [How does Angular simplifies Internationalization?](#how-does-angular-simplifies-internationalization)| |
| 201 | +|177| [How does Angular simplify Internationalization?](#how-does-angular-simplify-internationalization)| |
202 | 202 | |178| [How do you manually register locale data?](#how-do-you-manually-register-locale-data)|
|
203 | 203 | |179| [What are the four phases of template translation?](#what-are-the-four-phases-of-template-translation)|
|
204 | 204 | |180| [What is the purpose of i18n attribute?](#what-is-the-purpose-of-i18n-attribute)|
|
|
594 | 594 | console.log(myService); // MyService
|
595 | 595 | }
|
596 | 596 | }
|
597 |
| - |
| 597 | +
|
598 | 598 | // Angular v18 and above
|
599 |
| - |
| 599 | +
|
600 | 600 | import { Component, inject } from '@angular/core';
|
601 | 601 | import { MyService } from './my-service';
|
602 | 602 |
|
|
953 | 953 |
|
954 | 954 | 34. ### What is a bootstrapping module?
|
955 | 955 | Every application has at least one Angular module, the root module that you bootstrap to launch the application is called as bootstrapping module. It is commonly known as `AppModule`. The default structure of `AppModule` generated by AngularCLI would be as follows:
|
956 |
| - |
| 956 | +
|
957 | 957 | ```javascript
|
958 | 958 | import { BrowserModule } from '@angular/platform-browser';
|
959 | 959 | import { NgModule } from '@angular/core';
|
|
1582 | 1582 |
|
1583 | 1583 | 78. ### What is AOT?
|
1584 | 1584 | Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time. This is the default starting in Angular 9. When you run the ng build (build only) or ng serve (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the aot property in your build configuration specified in angular.json. By default, aot is set to true.
|
1585 |
| - |
| 1585 | +
|
1586 | 1586 | ```cmd
|
1587 | 1587 | ng build
|
1588 | 1588 | ng serve
|
|
2017 | 2017 | ```javascript
|
2018 | 2018 | import { Component, OnInit, Input } from '@angular/core';
|
2019 | 2019 | import { trigger, state, style, animate, transition } from '@angular/animations';
|
2020 |
| - |
| 2020 | +
|
2021 | 2021 | @Component({
|
2022 | 2022 | selector: 'app-animate',
|
2023 | 2023 | templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,
|
|
2044 | 2044 | ]
|
2045 | 2045 | })
|
2046 | 2046 | export class AnimateComponent implements OnInit {
|
2047 |
| - |
| 2047 | +
|
2048 | 2048 | @Input() currentState;
|
2049 |
| - |
| 2049 | +
|
2050 | 2050 | constructor() { }
|
2051 |
| - |
| 2051 | +
|
2052 | 2052 | ngOnInit() {
|
2053 | 2053 | }
|
2054 | 2054 | }
|
|
2353 | 2353 |
|
2354 | 2354 | **[⬆ Back to Top](#table-of-contents)**
|
2355 | 2355 |
|
2356 |
| -131. ### what is an rxjs subject in Angular |
| 2356 | +131. ### What is an RxJS Subject in Angular? |
2357 | 2357 | An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.
|
2358 |
| - |
| 2358 | +
|
2359 | 2359 | A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.
|
2360 | 2360 |
|
2361 | 2361 | ``` typescript
|
2362 | 2362 | import { Subject } from 'rxjs';
|
2363 |
| - |
| 2363 | +
|
2364 | 2364 | const subject = new Subject<number>();
|
2365 | 2365 |
|
2366 | 2366 | subject.subscribe({
|
|
2522 | 2522 |
|
2523 | 2523 | **[⬆ Back to Top](#table-of-contents)**
|
2524 | 2524 |
|
2525 |
| -142. ### Is Angular supports dynamic imports? |
| 2525 | +142. ### Does Angular support dynamic imports? |
2526 | 2526 | Yes, Angular 8 supports dynamic imports in router configuration. i.e, You can use the import statement for lazy loading the module using `loadChildren` method and it will be understood by the IDEs(VSCode and WebStorm), webpack, etc.
|
2527 | 2527 | Previously, you have been written as below to lazily load the feature module. By mistake, if you have typo in the module name it still accepts the string and throws an error during build time.
|
2528 | 2528 | ```javascript
|
|
2771 | 2771 | **[⬆ Back to Top](#table-of-contents)**
|
2772 | 2772 |
|
2773 | 2773 | 157. ### What is the browser support for Angular?
|
2774 |
| - Angular supports most recent browsers which includes both desktop and mobile browsers. |
| 2774 | + Angular supports most recent browsers which includes both desktop and mobile browsers. As of Angular 13+, IE is no longer supported. |
2775 | 2775 |
|
2776 | 2776 | | Browser | Version |
|
2777 | 2777 | |---- | --------- |
|
2778 |
| - | Chrome | latest | |
2779 |
| - | Firefox | latest | |
| 2778 | + | Chrome | 2 most recent major versions | |
| 2779 | + | Firefox | 2 most recent major versions | |
2780 | 2780 | | Edge | 2 most recent major versions |
|
2781 |
| - | IE | 11, 10, 9 (Compatibility mode is not supported) | |
2782 | 2781 | | Safari | 2 most recent major versions |
|
2783 |
| - | IE Mobile | 11 | |
2784 | 2782 | | iOS | 2 most recent major versions |
|
2785 |
| - | Android | 7.0, 6.0, 5.0, 5.1, 4.4 | |
| 2783 | + | Android | 2 most recent major versions | |
2786 | 2784 |
|
2787 | 2785 | **[⬆ Back to Top](#table-of-contents)**
|
2788 | 2786 |
|
|
2834 | 2832 |
|
2835 | 2833 | **[⬆ Back to Top](#table-of-contents)**
|
2836 | 2834 |
|
2837 |
| -165. ### What is Sanitization? Is angular supports it? |
| 2835 | +165. ### What is Sanitization? Does Angular support it? |
2838 | 2836 | **Sanitization** is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. Yes, Angular supports sanitization. It sanitizes untrusted values for HTML, styles, and URLs but sanitizing resource URLs isn't possible because they contain arbitrary code.
|
2839 | 2837 |
|
2840 | 2838 | **[⬆ Back to Top](#table-of-contents)**
|
|
2897 | 2895 |
|
2898 | 2896 | **[⬆ Back to Top](#table-of-contents)**
|
2899 | 2897 |
|
2900 |
| -169. ### Is safe to use direct DOM API methods in terms of security? |
| 2898 | +169. ### Is it safe to use direct DOM API methods in terms of security? |
2901 | 2899 | No,the built-in browser DOM APIs or methods don't automatically protect you from security vulnerabilities. In this case it is recommended to use Angular templates instead of directly interacting with DOM. If it is unavoidable then use the built-in Angular sanitization functions.
|
2902 | 2900 |
|
2903 | 2901 | **[⬆ Back to Top](#table-of-contents)**
|
|
2912 | 2910 |
|
2913 | 2911 | **[⬆ Back to Top](#table-of-contents)**
|
2914 | 2912 |
|
2915 |
| -172. ### Is angular prevents http level vulnerabilities? |
| 2913 | +172. ### Does Angular prevent HTTP level vulnerabilities? |
2916 | 2914 | Angular has built-in support for preventing http level vulnerabilities such as as cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Even though these vulnerabilities need to be mitigated on server-side, Angular provides helpers to make the integration easier on the client side.
|
2917 | 2915 | 1. HttpClient supports a token mechanism used to prevent XSRF attacks
|
2918 | 2916 | 2. HttpClient library recognizes the convention of prefixed JSON responses(which non-executable js code with ")]}',\\n" characters) and automatically strips the string ")]}',\\n" from all responses before further parsing
|
|
2971 | 2969 |
|
2972 | 2970 | **[⬆ Back to Top](#table-of-contents)**
|
2973 | 2971 |
|
2974 |
| -175. ### Is multiple interceptors supported in Angular? |
| 2972 | +175. ### Are multiple interceptors supported in Angular? |
2975 | 2973 | Yes, Angular supports multiple interceptors at a time. You could define multiple interceptors in providers property:
|
2976 | 2974 | ```javascript
|
2977 | 2975 | providers: [
|
|
3018 | 3016 |
|
3019 | 3017 | **[⬆ Back to Top](#table-of-contents)**
|
3020 | 3018 |
|
3021 |
| -177. ### How does Angular simplifies Internationalization? |
| 3019 | +177. ### How does Angular simplify Internationalization? |
3022 | 3020 |
|
3023 | 3021 | Angular simplifies the below areas of internationalization,
|
3024 | 3022 | 1. Displaying dates, number, percentages, and currencies in a local format.
|
|
4171 | 4169 | ```js
|
4172 | 4170 | import { Component } from '@angular/core';
|
4173 | 4171 | import { FormControl } from '@angular/forms';
|
4174 |
| - |
| 4172 | +
|
4175 | 4173 | @Component({
|
4176 | 4174 | selector: 'user-profile',
|
4177 | 4175 | styleUrls: ['./user-profile.component.css'],
|
|
4613 | 4611 | A component harness is a testing API around an Angular directive or component to make tests simpler by hiding implementation details from test suites. This can be shared between unit tests, integration tests, and end-to-end tests. The idea for component harnesses comes from the **PageObject** pattern commonly used for integration testing.
|
4614 | 4612 |
|
4615 | 4613 | **[⬆ Back to Top](#table-of-contents)**
|
4616 |
| - |
| 4614 | +
|
4617 | 4615 | 273. ### What is the benefit of Automatic Inlining of Fonts?
|
4618 | 4616 | During compile time, Angular CLI will download and inline the fonts that your application is using. This performance update speed up the first contentful paint(FCP) and this feature is enabled by default in apps built with version 11.
|
4619 | 4617 |
|
|
4634 | 4632 |
|
4635 | 4633 | **[⬆ Back to Top](#table-of-contents)**
|
4636 | 4634 |
|
4637 |
| -277. ### How to create a standalone component uing CLI command? |
| 4635 | +277. ### How to create a standalone component using CLI command? |
4638 | 4636 |
|
4639 |
| - Generate standalone component using CLI command as shown below |
| 4637 | + Generate a standalone component using the CLI command as shown below: |
4640 | 4638 | ```bash
|
4641 | 4639 | ng generate component component-name --standalone
|
4642 | 4640 | ```
|
4643 | 4641 | On running the command standalone component is created.
|
4644 | 4642 | Here is the list of file created.
|
4645 |
| - |
| 4643 | +
|
4646 | 4644 | 1. `component-name.component.ts`
|
4647 | 4645 | 2. `component-name.component.css`
|
4648 | 4646 | 3. `component-name.component.spec`
|
4649 | 4647 | 4. `component-name.component.html`
|
4650 |
| - |
| 4648 | +
|
4651 | 4649 | Next need to update `app.module.ts` as shown below.
|
4652 | 4650 |
|
4653 | 4651 | ```typescript
|
|
4706 | 4704 | })
|
4707 | 4705 | export class AppModule {}
|
4708 | 4706 | ```
|
4709 |
| - |
| 4707 | +
|
4710 | 4708 | **[⬆ Back to Top](#table-of-contents)**
|
4711 | 4709 |
|
4712 | 4710 | 279. ### What is hydration?
|
4713 | 4711 | Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.
|
4714 | 4712 |
|
4715 | 4713 | To enable hydration, we have to enable server side rendering or Angular Universal. Once enabled, we can add the following piece of code in the root component.
|
4716 |
| - |
| 4714 | +
|
4717 | 4715 | ```typescript
|
4718 | 4716 | import {
|
4719 | 4717 | bootstrapApplication,
|
|
4737 | 4735 | })
|
4738 | 4736 | export class AppModule {}
|
4739 | 4737 | ```
|
4740 |
| - |
| 4738 | +
|
4741 | 4739 | **[⬆ Back to Top](#table-of-contents)**
|
4742 | 4740 |
|
4743 | 4741 | 280. ### What are Angular Signals?
|
4744 | 4742 | A signal is a wrapper around a value that can notify interested consumers when that value changes. Signals can contain any value, from simple primitives to complex data structures.
|
4745 | 4743 |
|
4746 | 4744 | **[⬆ Back to Top](#table-of-contents)**
|
4747 |
| - |
| 4745 | +
|
4748 | 4746 | 281. ### Explain Angular Signals with an example.
|
4749 | 4747 | In this example, we create a signal named `count` and initialize it with a value of 0. We then connect to the signal, allowing us to be notified whenever its value changes. Finally, we add a button that increments the count when clicked.
|
4750 | 4748 |
|
|
0 commit comments