diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..0702a02 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +github: [sudheerj] +custom: https://buymeacoffee.com/sudheerj diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml new file mode 100644 index 0000000..8a32fac --- /dev/null +++ b/.github/workflows/main.yaml @@ -0,0 +1,32 @@ +name: Advanced Usage + +on: [push, pull_request] + +env: + FILE_NAME: angular-interview-questions + +jobs: + convert_via_pandoc: + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v2 + + - name: Create output directory + run: | + mkdir output # create output dir + + - name: Create PDF + uses: docker://pandoc/latex:2.10 + with: + args: --pdf-engine=xelatex --output=output/${{env.FILE_NAME}}.pdf README.md + + - name: Create epub + uses: docker://pandoc/latex:2.10 + with: + args: --output=output/${{env.FILE_NAME}}.epub README.md + + - name: Upload + uses: actions/upload-artifact@master + with: + name: output + path: output \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index d468e16..0000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,521 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Screen - interpo - 20 - 21 - 22 - 23 - 24 - 25 - - - - - - - - - - - true - DEFINITION_ORDER - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - project - - - - - - - - - - - - - - - - project - - - true - - - - DIRECTORY - - false - - - - - - - - - 1533740105017 - - - 1533752795347 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 261eeb9..0000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/README.md b/README.md index f4e3e14..abc3762 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,42 @@ # Angular Interview Questions & Answers -> Click :star:if you like the project. Pull Request are highly appreciated. +> Click :star: if you like the project and follow [@SudheerJonna](https://twitter.com/SudheerJonna) for technical updates. + +--- + +

+ + ZTM Logo + +

+

    +
  1. Take this Angular course to go from a complete Angular beginner to confidently building enterprise-level applications from scratch
    2. +
  2. Take this coding interview bootcamp if you're serious about getting hired and don't have a CS degree
    3. +
+

+

+ +--- ### Table of Contents | No. | Questions | |---- | --------- -|1 | [What is Angular?](#what-is-angular) | -|2 | [What is the difference between AngularJS and Angular?](#what-is-the-difference-between-angularjs-and-angular?)| -|3 | [What is typescript?](#what-is-typescript)| +|1 | [What is Angular Framework?](#what-is-angular-framework)| +|2 | [What is the difference between AngularJS and Angular?](#what-is-the-difference-between-angularjs-and-angular)| +|3 | [What is TypeScript?](#what-is-typescript)| |4 | [Write a pictorial diagram of Angular architecture?](#write-a-pictorial-diagram-of-angular-architecture)| -|5 | [What are the key components of Angular?](#what-are-the-key-components-of-angular?)| +|5 | [What are the key components of Angular?](#what-are-the-key-components-of-angular)| |6 | [What are directives?](#what-are-directives)| |7 | [What are components?](#what-are-components)| |8 | [What are the differences between Component and Directive?](#what-are-the-differences-between-component-and-directive)| |9 | [What is a template?](#what-is-a-template)| -|10| [What is a module?](#what-is-a-module?)| +|10| [What is a module?](#what-is-a-module)| |11| [What are lifecycle hooks available?](#what-are-lifecycle-hooks-available)| |12| [What is a data binding?](#what-is-a-data-binding)| |13| [What is metadata?](#what-is-metadata)| -|14| [What is angular CLI?](#what-is-angular-cli)| -|15| [What is the difference between constructor and ngOnInit?](#what-is-the-difference-between-constructor-and-ngoninit?)| +|14| [What is Angular CLI?](#what-is-angular-cli)| +|15| [What is the difference between constructor and ngOnInit?](#what-is-the-difference-between-constructor-and-ngoninit)| |16| [What is a service](#what-is-a-service)| |17| [What is dependency injection in Angular?](#what-is-dependency-injection-in-angular)| |18| [How is Dependency Hierarchy formed?](#how-is-dependency-hierarchy-formed)| @@ -33,32 +49,291 @@ |25| [What are template expressions?](#what-are-template-expressions)| |26| [What are template statements?](#what-are-template-statements)| |27| [How do you categorize data binding types?](#how-do-you-categorize-data-binding-types)| - +|28| [What are pipes?](#what-are-pipes)| +|29| [What is a parameterized pipe?](#what-is-a-parameterized-pipe)| +|30| [How do you chain pipes?](#how-do-you-chain-pipes)| +|31| [What is a custom pipe?](#what-is-a-custom-pipe)| +|32| [Give an example of custom pipe?](#give-an-example-of-custom-pipe)| +|33| [What is the difference between pure and impure pipe?](#what-is-the-difference-between-pure-and-impure-pipe)| +|34| [What is a bootstrapping module?](#what-is-a-bootstrapping-module)| +|35| [What are observables?](#what-are-observables)| +|36| [What is HttpClient and its benefits?](#what-is-httpclient-and-its-benefits)| +|37| [Explain on how to use HttpClient with an example?](#explain-on-how-to-use-httpclient-with-an-example)| +|38| [How can you read full response?](#how-can-you-read-full-response)| +|39| [How do you perform Error handling?](#how-do-you-perform-error-handling)| +|40| [What is RxJS?](#what-is-rxjs)| +|41| [What is subscribing?](#what-is-subscribing)| +|42| [What is an observable?](#what-is-an-observable)| +|43| [What is an observer?](#what-is-an-observer)| +|44| [What is the difference between promise and observable?](#what-is-the-difference-between-promise-and-observable)| +|45| [What is multicasting?](#what-is-multicasting)| +|46| [How do you perform error handling in observables?](#how-do-you-perform-error-handling-in-observables)| +|47| [What is the shorthand notation for subscribe method?](#what-is-the-shorthand-notation-for-subscribe-method)| +|48| [What are the utility functions provided by RxJS?](#what-are-the-utility-functions-provided-by-rxjs)| +|49| [What are observable creation functions?](#what-are-observable-creation-functions)| +|50| [What will happen if you do not supply handler for the observer?](#what-will-happen-if-you-do-not-supply-handler-for-the-observer)| +|51| [What are Angular elements?](#what-are-angular-elements)| +|52| [What is the browser support of Angular Elements?](#what-is-the-browser-support-of-angular-elements)| +|53| [What are custom elements?](#what-are-custom-elements)| +|54| [Do I need to bootstrap custom elements?](#do-i-need-to-bootstrap-custom-elements)| +|55| [Explain how custom elements works internally?](#explain-how-custom-elements-works-internally)| +|56| [How to transfer components to custom elements?](#how-to-transfer-components-to-custom-elements)| +|57| [What are the mapping rules between Angular component and custom element?](#what-are-the-mapping-rules-between-angular-component-and-custom-element)| +|58| [How do you define typings for custom elements?](#how-do-you-define-typings-for-custom-elements)| +|59| [What are dynamic components?](#what-are-dynamic-components)| +|60| [What are the various kinds of directives?](#what-are-the-various-kinds-of-directives)| +|61| [How do you create directives using CLI?](#how-do-you-create-directives-using-cli)| +|62| [Give an example for attribute directives?](#give-an-example-for-attribute-directives)| +|63| [What is Angular Router?](#what-is-angular-router)| +|64| [What is the purpose of base href tag?](#what-is-the-purpose-of-base-href-tag)| +|65| [What are the router imports?](#what-are-the-router-imports)| +|66| [What is router outlet?](#what-is-router-outlet)| +|67| [What are router links?](#what-are-router-links)| +|68| [What are active router links?](#what-are-active-router-links)| +|69| [What is router state?](#what-is-router-state)| +|70| [What are router events?](#what-are-router-events)| +|71| [What is activated route?](#what-is-activated-route)| +|72| [How do you define routes?](#how-do-you-define-routes)| +|73| [What is the purpose of Wildcard route?](#what-is-the-purpose-of-wildcard-route)| +|74| [Do I need a Routing Module always?](#do-i-need-a-routing-module-always)| +|75| [What is Angular Universal?](#what-is-angular-universal)| +|76| [What are different types of compilation in Angular?](#what-are-different-types-of-compilation-in-angular)| +|77| [What is JIT?](#what-is-jit)| +|78| [What is AOT?](#what-is-aot)| +|79| [Why do we need compilation process?](#why-do-we-need-compilation-process)| +|80| [What are the advantages with AOT?](#what-are-the-advantages-with-aot)| +|81| [What are the ways to control AOT compilation?](#what-are-the-ways-to-control-aot-compilation)| +|82| [What are the restrictions of metadata?](#what-are-the-restrictions-of-metadata)| +|83| [What are the three phases of AOT?](#what-are-the-three-phases-of-aot)| +|84| [Can I use arrow functions in AOT?](#can-i-use-arrow-functions-in-aot)| +|85| [What is the purpose of metadata json files?](#what-is-the-purpose-of-metadata-json-files)| +|86| [Can I use any javascript feature for expression syntax in AOT?](#can-i-use-any-javascript-feature-for-expression-syntax-in-aot)| +|87| [What is folding?](#what-is-folding)| +|88| [What are macros?](#what-are-macros)| +|89| [Give an example of few metadata errors?](#give-an-example-of-few-metadata-errors)| +|90| [What is metadata rewriting?](#what-is-metadata-rewriting)| +|91| [How do you provide configuration inheritance?](#how-do-you-provide-configuration-inheritance)| +|92| [How do you specify angular template compiler options?](#how-do-you-specify-angular-template-compiler-options)| +|93| [How do you enable binding expression validation?](#how-do-you-enable-binding-expression-validation)| +|94| [What is the purpose of any type cast function?](#what-is-the-purpose-of-any-type-cast-function)| +|95| [What is Non null type assertion operator?](#what-is-non-null-type-assertion-operator)| +|96| [What is type narrowing?](#what-is-type-narrowing)| +|97| [How do you describe various dependencies in angular application?](#how-do-you-describe-various-dependencies-in-angular-application)| +|98| [What is zone?](#what-is-zone)| +|99| [What is the purpose of common module?](#what-is-the-purpose-of-common-module)| +|100| [What is codelyzer?](#what-is-codelyzer)| +|101| [What is angular animation?](#what-is-angular-animation)| +|102| [What are the steps to use animation module?](#what-are-the-steps-to-use-animation-module)| +|103| [What is State function?](#what-is-state-function)| +|104| [What is Style function?](#what-is-style-function)| +|105| [What is the purpose of animate function?](#what-is-the-purpose-of-animate-function)| +|106| [What is transition function?](#what-is-transition-function)| +|107| [How to inject the dynamic script in angular?](#how-to-inject-the-dynamic-script-in-angular)| +|108| [What is a service worker and its role in Angular?](#what-is-a-service-worker-and-its-role-in-angular)| +|109| [What are the design goals of service workers?](#what-are-the-design-goals-of-service-workers)| +|110| [What are the differences between AngularJS and Angular with respect to dependency injection?](#what-are-the-differences-between-angularjs-and-angular-with-respect-to-dependency-injection)| +|111| [What is Angular Ivy?](#what-is-angular-ivy)| +|112| [What are the features included in ivy preview?](#what-are-the-features-included-in-ivy-preview)| +|113| [Can I use AOT compilation with Ivy?](#can-i-use-aot-compilation-with-ivy)| +|114| [What is Angular Language Service?](#what-is-angular-language-service)| +|115| [How do you install angular language service in the project?](#how-do-you-install-angular-language-service-in-the-project)| +|116| [Is there any editor support for Angular Language Service?](#is-there-any-editor-support-for-angular-language-service)| +|117| [Explain the features provided by Angular Language Service?](#explain-the-features-provided-by-angular-language-service)| +|118| [How do you add web workers in your application?](#how-do-you-add-web-workers-in-your-application)| +|119| [What are the limitations with web workers?](#what-are-the-limitations-with-web-workers)| +|120| [What is Angular CLI Builder?](#what-is-angular-cli-builder)| +|121| [What is a builder?](#what-is-a-builder)| +|122| [How do you invoke a builder?](#how-do-you-invoke-a-builder)| +|123| [How do you create app shell in Angular?](#how-do-you-create-app-shell-in-angular)| +|124| [What are the case types in Angular?](#what-are-the-case-types-in-angular)| +|125| [What are the class decorators in Angular?](#what-are-the-class-decorators-in-angular)| +|126| [What are class field decorators?](#what-are-class-field-decorators)| +|127| [What is declarable in Angular?](#what-is-declarable-in-angular)| +|128| [What are the restrictions on declarable classes?](#what-are-the-restrictions-on-declarable-classes)| +|129| [What is a DI token?](#what-is-a-di-token)| +|130| [What is Angular DSL?](#what-is-angular-dsl)| +|131| [What is an rxjs Subject?](#what-is-an-rxjs-Subject)| +|132| [What is Bazel tool?](#what-is-bazel-tool)| +|133| [What are the advantages of Bazel tool?](#what-are-the-advantages-of-bazel-tool)| +|134| [How do you use Bazel with Angular CLI?](#how-do-you-use-bazel-with-angular-cli)| +|135| [How do you run Bazel directly?](#how-do-you-run-bazel-directly)| +|136| [What is platform in Angular?](#what-is-platform-in-angular)| +|137| [What happens if I import the same module twice?](#what-happens-if-i-import-the-same-module-twice)| +|138| [How do you select an element with in a component template?](#how-do-you-select-an-element-with-in-a-component-template)| +|139| [How do you detect route change in Angular?](#how-do-you-detect-route-change-in-angular)| +|140| [How do you pass headers for HTTP client?](#how-do-you-pass-headers-for-http-client)| +|141| [What is the purpose of differential loading in CLI?](#what-is-the-purpose-of-differential-loading-in-cli)| +|142| [Does Angular support dynamic imports?](#does-angular-support-dynamic-imports)| +|143| [What is lazy loading?](#what-is-lazy-loading)| +|144| [What are workspace APIs?](#what-are-workspace-apis)| +|145| [How do you upgrade angular version?](#how-do-you-upgrade-angular-version)| +|146| [What is Angular Material?](#what-is-angular-material)| +|147| [How do you upgrade location service of angularjs?](#how-do-you-upgrade-location-service-of-angularjs)| +|148| [What is NgUpgrade?](#what-is-ngupgrade)| +|149| [How do you test Angular application using CLI?](#how-do-you-test-angular-application-using-cli)| +|150| [How to use polyfills in Angular application?](#how-to-use-polyfills-in-angular-application)| +|151| [What are the ways to trigger change detection in Angular?](#what-are-the-ways-to-trigger-change-detection-in-angular)| +|152| [What are the differences of various versions of Angular?](#what-are-the-differences-of-various-versions-of-angular)| +|153| [What are the security principles in angular?](#what-are-the-security-principles-in-angular)| +|154| [What is the reason to deprecate Web Tracing Framework?](#what-is-the-reason-to-deprecate-web-tracing-framework)| +|155| [What is the reason to deprecate web worker packages?](#what-is-the-reason-to-deprecate-web-worker-packages)| +|156| [How do you find angular CLI version?](#how-do-you-find-angular-cli-version)| +|157| [What is the browser support for Angular?](#what-is-the-browser-support-for-angular)| +|158| [What is schematic](#what-is-schematic)| +|159| [What is rule in Schematics?](#what-is-rule-in-schematics)| +|160| [What is Schematics CLI?](#what-is-schematics-cli)| +|161| [What are the best practices for security in angular?](#what-are-the-best-practices-for-security-in-angular)| +|162| [What is Angular security model for preventing XSS attacks?](#what-is-angular-security-model-for-preventing-xss-attacks)| +|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)| +|164| [What are the various security contexts in Angular?](#what-are-the-various-security-contexts-in-Angular)| +|165| [What is Sanitization? Does Angular support it?](#what-is-sanitization-does-angular-support-it)| +|166| [What is the purpose of innerHTML?](#what-is-the-purpose-of-innerhtml)| +|167| [What is the difference between interpolated content and innerHTML?](#what-is-the-difference-between-interpolated-content-and-innerhtml)| +|168| [How do you prevent automatic sanitization?](#how-do-you-prevent-automatic-sanitization)| +|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)| +|170| [What is DOM sanitizer?](#what-is-dom-sanitizer)| +|171| [How do you support server side XSS protection in Angular application?](#how-do-you-support-server-side-xss-protection-in-angular-application) +|172| [Does Angular prevent HTTP level vulnerabilities?](#does-angular-prevent-http-level-vulnerabilities)| +|173| [What are Http Interceptors?](#what-are-http-interceptors)| +|174| [What are the applications of HTTP interceptors?](#what-are-the-applications-of-http-interceptors)| +|175| [Are multiple interceptors supported in Angular?](#are-multiple-interceptors-supported-in-angular)| +|176| [How can I use interceptor for an entire application?](#how-can-i-use-interceptor-for-an-entire-application)| +|177| [How does Angular simplify Internationalization?](#how-does-angular-simplify-internationalization)| +|178| [How do you manually register locale data?](#how-do-you-manually-register-locale-data)| +|179| [What are the four phases of template translation?](#what-are-the-four-phases-of-template-translation)| +|180| [What is the purpose of i18n attribute?](#what-is-the-purpose-of-i18n-attribute)| +|181| [What is the purpose of custom id?](#what-is-the-purpose-of-custom-id)| +|182| [What happens if the custom id is not unique?](#what-happens-if-the-custom-id-is-not-unique)| +|183| [Can I translate text without creating an element?](#can-i-translate-text-without-creating-an-element)| +|184| [How can I translate attribute?](#how-can-i-translate-attribute)| +|185| [List down the pluralization categories?](#list-down-the-pluralization-categories)| +|186| [What is select ICU expression?](#what-is-select-icu-expression)| +|187| [How do you report missing translations?](#how-do-you-report-missing-translations)| +|188| [How do you provide build configuration for multiple locales?](#how-do-you-provide-build-configuration-for-multiple-locales)| +|189| [What is an angular library?](#what-is-an-angular-library)| +|190| [What is AOT compiler?](#what-is-aot-compiler)| +|191| [How do you select an element in component template?](#how-do-you-select-an-element-in-component-template)| +|192| [What is TestBed?](#what-is-testbed)| +|193| [What is protractor?](#what-is-protractor)| +|194| [What is collection?](#what-is-collection)| +|195| [How do you create schematics for libraries?](#how-do-you-create-schematics-for-libraries)| +|196| [How do you use jquery in Angular?](#how-do-you-use-jquery-in-angular)| +|197| [What is the reason for No provider for HTTP exception?](#what-is-the-reason-for-no-provider-for-http-exception)| +|198| [What is router state?](#what-is-router-state)| +|199| [How can I use SASS in angular project?](#how-can-i-use-sass-in-angular-project)| +|200| [What is the purpose of hidden property?](#what-is-the-purpose-of-hidden-property)| +|201| [What is the difference between ngIf and hidden property?](#what-is-the-difference-between-ngif-and-hidden-property)| +|202| [What is slice pipe?](#what-is-slice-pipe)| +|203| [What is index property in ngFor directive?](#what-is-index-property-in-ngfor-directive)| +|204| [What is the purpose of ngFor trackBy?](#what-is-the-purpose-of-ngfor-trackby)| +|205| [What is the purpose of ngSwitch directive?](#what-is-the-purpose-of-ngswitch-directive)| +|206| [Is it possible to do aliasing for inputs and outputs?](#is-it-possible-to-do-aliasing-for-inputs-and-outputs)| +|207| [What is safe navigation operator?](#what-is-safe-navigation-operator)| +|208| [Is any special configuration required for Angular9?](#is-any-special-configuration-required-for-angular9)| +|209| [What are type safe TestBed API changes in Angular9?](#what-are-type-safe-testbed-api-changes-in-angular9)| +|210| [Is mandatory to pass static flag for ViewChild?](#is-mandatory-to-pass-static-flag-for-viewchild)| +|211| [What are the list of template expression operators?](#what-are-the-list-of-template-expression-operators) +|212| [What is the precedence between pipe and ternary operators?](#what-is-the-precedence-between-pipe-and-ternary-operators) +|213| [What is an entry component?](#what-is-an-entry-component)| +|214| [What is a bootstrapped component?](#what-is-a-bootstrapped-component)| +|215| [How do you manually bootstrap an application?](#how-do-you-manually-bootstrap-an-application)| +|216| [Is it necessary for bootstrapped component to be entry component?](#is-it-necessary-for-bootstrapped-component-to-be-entry-component)| +|217| [What is a routed entry component?](#what-is-a-routed-entry-component#)| +|218| [Why is not necessary to use entryComponents array every time?](#why-is-not-necessary-to-use-entrycomponents-array-every-time)| +|219| [Do I still need to use entryComponents array in Angular9?](#do-i-still-need-to-use-entrycomponents-array-in-angular9#)| +|220| [Is it all components generated in production build?](#is-it-all-components-generated-in-production-build)| +|221| [What is Angular compiler?](#what-is-angular-compiler)| +|222| [What is the role of ngModule metadata in compilation process?](#what-is-the-role-of-ngmodule-metadata-in-compilation-process)| +|223| [How does angular finds components, directives and pipes?](#how-does-angular-finds-components-directives-and-pipes)| +|224| [Give few examples for NgModules?](#give-few-examples-for-ngmodules)| +|225| [What are feature modules?](#what-are-feature-modules)| +|226| [What are the imported modules in CLI generated feature modules?](#what-are-the-imported-modules-in-cli-generated-feature-modules)| +|227| [What are the differences between ngmodule and javascript module?](#what-are-the-differences-between-ngmodule-and-javascript-module)| +|228| [What are the possible errors with declarations?](#what-are-the-possible-errors-with-declarations)| +|229| [What are the steps to use declaration elements?](#what-are-the-steps-to-use-declaration-elements)| +|230| [What happens if browserModule used in feature module?](#what-happens-if-browsermodule-used-in-feature-module)| +|231| [What are the types of feature modules?](#what-are-the-types-of-feature-modules)| +|232| [What is a provider?](#what-is-a-provider)| +|233| [What is the recommendation for provider scope?](#what-is-the-recommendation-for-provider-scope#)| +|234| [How do you restrict provider scope to a module?](#how-do-you-restrict-provider-scope-to-a-module)| +|235| [How do you provide a singleton service?](#how-do-you-provide-a-singleton-service)| +|236| [What are the different ways to remove duplicate service registration?](#what-are-the-different-ways-to-remove-duplicate-service-registration)| +|237| [How does forRoot method helpful to avoid duplicate router instances?](#how-does-forroot-method-helpful-to-avoid-duplicate-router-instances)| +|238| [What is a shared module?](#what-is-a-shared-module)| +|239| [Can I share services using modules?](#can-i-share-services-using-modules)| +|240| [How do you get current direction for locales??](#how-do-you-get-current-direction-for-locales)| +|241| [What is ngcc?](#what-is-ngcc)| +|242| [What classes should not be added to declarations?](#what-classes-should-not-be-added-to-declarations)| +|243| [What is ngzone?](#what-is-ngzone)| +|244| [What is NoopZone?](#what-is-noopzone)| +|245| [How do you create displayBlock components?](#how-do-you-create-displayblock-components)| +|246| [What are the possible data change scenarios for change detection?](#what-are-the-possible-data-change-scenarios-for-change-detection)| +|247| [What is a zone context?](#what-is-a-zone-context)| +|248| [What are the lifecycle hooks of a zone?](#what-are-the-lifecycle-hooks-of-a-zone)| +|249| [Which are the methods of NgZone used to control change detection?](#which-are-the-methods-of-ngzone-used-to-control-change-detection)| +|250| [How do you change the settings of zonejs?](#how-do-you-change-the-settings-of-zonejs)| +|251| [How do you trigger an animation?](#how-do-you-trigger-an-animation)| +|252| [How do you configure injectors with providers at different levels?](#how-do-you-configure-injectors-with-providers-at-different-levels)| +|253| [Is it mandatory to use injectable on every service class?](#is-it-mandatory-to-use-injectable-on-every-service-class)| +|254| [What is an optional dependency?](#what-is-an-optional-dependency)| +|255| [What are the types of injector hierarchies?](#what-are-the-types-of-injector-hierarchies)| +|256| [What are reactive forms?](#what-are-reactive-forms)| +|257| [What are dynamic forms?](#what-are-dynamic-forms)| +|258| [What are template driven forms?](#what-are-template-driven-forms)| +|259| [What are the differences between reactive forms and template driven forms?](#what-are-the-differences-between-reactive-forms-and-template-driven-forms)| +|260| [What are the different ways to group form controls?](#what-are-the-different-ways-to-group-form-controls)| +|261| [How do you update specific properties of a form model?](#how-do-you-update-specific-properties-of-a-form-model)| +|262| [What is the purpose of FormBuilder?](#what-is-the-purpose-of-formbuilder)| +|263| [How do you verify the model changes in forms?](#how-do-you-verify-the-model-changes-in-forms)| +|264| [What are the state CSS classes provided by ngModel?](#what-are-the-state-css-classes-provided-by-ngmodel)| +|265| [How do you reset the form?](#how-do-you-reset-the-form)| +|266| [What are the types of validator functions?](#what-are-the-types-of-validator-functions)| +|267| [Can you give an example of built-in validators?](#can-you-give-an-example-of-built-in-validators)| +|268| [How do you optimize the performance of async validators?](#how-do-you-optimize-the-performance-of-async-validators)| +|269| [How to set ngFor and ngIf on the same element?](#how-to-set-ngfor-and-ngif-on-the-same-element)| +|270| [What is host property in css?](#what-is-host-property-in-css)| +|271| [How do you get the current route?](#how-do-you-get-the-current-route)| +|272| [What is Component Test Harnesses?](#what-is-component-test-harnesses)| +|273| [What is the benefit of Automatic Inlining of Fonts?](#what-is-the-benefit-of-automatic-inlining-of-fonts)| +|274| [What is content projection?](#what-is-content-projection)| +|275| [What is ng-content and its purpose?](#what-is-ng-content-and-its-purpose)| +|276| [What is standalone component?](#what-is-standalone-component)| +|277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command) +|278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually) +|279| [What is hydration ?](#what-is-hydration) +|280| [What are Angular Signals?](#what-are-angular-signals) +|281| [Explain Angular Signals with an example](#explain-angular-signals-with-an-example) +|282| [What are the Route Parameters? Could you explain each of them?](#what-are-the-route-parameters-could-you-explain-each-of-them) +|283| [](#) 1. ### What is Angular Framework? - Angular is a **typeScript-based open-source** front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development. + Angular is a **TypeScript-based open-source** front-end platform that makes it easy to build web, mobile and desktop applications. The major features of this framework include declarative templates, dependency injection, end to end tooling which ease application development. + + **[⬆ Back to Top](#table-of-contents)** 2. ### What is the difference between AngularJS and Angular? - Angular is a completely revived component-based framework in which an application is a tree of individual components. + AngularJS (version 1.x) is a JavaScript framework, whereas Angular (version 2+) is a complete rewrite of AngularJS using TypeScript, providing better performance, mobile support, modularity, and a more modern architecture. - Some of the major difference in tabular form + Here are some of the major differences in tabular format:- | AngularJS | Angular | |---- | --------- - | It is based on MVC architecture | This is based on Service/Controller | - | This uses use JavaScript to build the application| Introduced the typescript to write the application | + | It is based on MVC architecture| This is based on Service/Controller| + | It uses JavaScript to build the application| Uses TypeScript to build the application| | Based on controllers concept| This is a component based UI approach| - | Not a mobile friendly framework| Developed considering mobile platform| - | Difficulty in SEO friendly application development| Ease to create SEO friendly applications| + | No support for mobile platforms| Fully supports mobile platforms| + | Difficult to build SEO friendly application| Ease to build SEO friendly applications| -3. ### What is typescript? - TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language. - You can install it globally as - ``` + **[⬆ Back to Top](#table-of-contents)** + +3. ### What is TypeScript? + TypeScript is a strongly typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await and many other features, and compiles to plain JavaScript. Angular is written entirely in TypeScript as a primary language. + You can install TypeScript globally as + ```cmd npm install -g typescript ``` - Let's see a simple example of typescript usage, + Let's see a simple example of TypeScript usage:- ```typescript function greeter(person: string) { return "Hello, " + person; @@ -70,18 +345,24 @@ ``` The greeter method allows only string type as argument. + **[⬆ Back to Top](#table-of-contents)** + 4. ### Write a pictorial diagram of Angular architecture? - The main building blocks of an Angular application is shown in the below diagram + The main building blocks of an Angular application are shown in the diagram below:- ![ScreenShot](images/architecture.png) + **[⬆ Back to Top](#table-of-contents)** + 5. ### What are the key components of Angular? - Angular has the below key components, - 1. **Component:** These are the basic building blocks of angular application to control HTML views. - 2. **Modules:** An angular module is set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task. - 3. **Templates:** This represent the views of an Angular application. - 4. **Services:** It is used to create components which can be shared across the entire application. + Angular has the key components below, + 1. **Component:** These are the basic building blocks of an Angular application to control HTML views. + 2. **Modules:** An Angular module is a set of angular basic building blocks like components, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task. + 3. **Templates:** These represent the views of an Angular application. + 4. **Services:** Are used to create components which can be shared across the entire application. 5. **Metadata:** This can be used to add more data to an Angular class. + **[⬆ Back to Top](#table-of-contents)** + 6. ### What are directives? Directives add behaviour to an existing DOM element or an existing component instance. ```typescript @@ -99,9 +380,10 @@ ```html

Highlight me!

``` + **[⬆ Back to Top](#table-of-contents)** 7. ### What are components? - Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. + Components are the most basic UI building block of an Angular app, which form a tree of Angular components. These components are a subset of directives. Unlike directives, components always have a template, and only one component can be instantiated per element in a template. Let's see a simple example of Angular component ```typescript import { Component } from '@angular/core'; @@ -119,6 +401,8 @@ } ``` + **[⬆ Back to Top](#table-of-contents)** + 8. ### What are the differences between Component and Directive? In a short note, A component(@component) is a directive-with-a-template. @@ -126,14 +410,17 @@ | Component | Directive | |---- | --------- - | To register a component we use @Component meta-data annotation | To register directives we use @Directive meta-data annotation | - | Components are typically used to create UI widgets| Directive is used to add behavior to an existing DOM element | - | Component is used to break up the application into smaller components| Directive is use to design re-usable components| + | To register a component we use @Component meta-data annotation | To register a directive we use @Directive meta-data annotation | + | Components are typically used to create UI widgets| Directives are used to add behavior to an existing DOM element | + | Component is used to break down the application into smaller components| Directive is used to design re-usable components| | Only one component can be present per DOM element | Many directives can be used per DOM element | | @View decorator or templateurl/template are mandatory | Directive doesn't use View| + **[⬆ Back to Top](#table-of-contents)** + 9. ### What is a template? A template is a HTML view where you can display data by binding controls to properties of an Angular component. You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property. + **Using inline template with template syntax,** ```typescript import { Component } from '@angular/core'; @@ -166,6 +453,8 @@ } ``` + **[⬆ Back to Top](#table-of-contents)** + 10. ### What is a module? Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application. @@ -178,20 +467,25 @@ @NgModule ({ imports: [ BrowserModule ], declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + bootstrap: [ AppComponent ], + providers: [] }) export class AppModule { } ``` - The NgModule decorator has three options - 1. The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application - 2. The declarations option is used to define components in the respective module - 3. The bootstrap option tells Angular which Component to bootstrap in the application + The NgModule decorator has five important (among all) options: + 1. The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application. + 2. The declarations option is used to define components in the respective module. + 3. The bootstrap option tells Angular which Component to bootstrap in the application. + 4. The providers option is used to configure a set of injectable objects that are available in the injector of this module. + 5. The entryComponents option is a set of components dynamically loaded into the view. + + **[⬆ Back to Top](#table-of-contents)** 11. ### What are lifecycle hooks available? Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. The representation of lifecycle in pictorial representation as follows, - ![ScreenShot](images/lifecycle.png) + ![ScreenShot](images/lifecycle.png) The description of each lifecycle method is as below, 1. **ngOnChanges:** When the value of a data bound property changes, then this method is called. @@ -203,99 +497,121 @@ 7. **ngAfterViewChecked:** This is called in response after Angular checks the component's views and child views. 8. **ngOnDestroy:** This is the cleanup phase just before Angular destroys the directive/component. + **[⬆ Back to Top](#table-of-contents)** + 12. ### What is a data binding? Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding(divided as 3 categories) which differ in the way the data is flowing. 1. **From the Component to the DOM:** - **Interpolation:** {{ value }}: Adds the value of a property from the component - ```html -
  • Name: {{ user.name }}
    • -
  • Address: {{ user.address }}
    • - ``` - **Property binding:** [property]=”value”: The value is passed from the component to the specified property or simple HTML attribute - ```html - - ``` + + **Interpolation:** {{ value }}: Adds the value of a property from the component + ```html +
  • Name: {{ user.name }}
    • +
  • Address: {{ user.address }}
    • + ``` + **Property binding:** [property]=”value”: The value is passed from the component to the specified property or simple HTML attribute + ```html + + ``` 2. **From the DOM to the Component:** - **Event binding: (event)=”function”:** When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component - ```html - - ``` + **Event binding: (event)=”function”:** When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component + ```html + + ``` 3. **Two-way binding:** - **Two-way data binding:** [(ngModel)]=”value”: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync - ```html - - ``` + **Two-way data binding:** [(ngModel)]=”value”: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync + ```html + + ``` + + **[⬆ Back to Top](#table-of-contents)** 13. ### What is metadata? Metadata is used to decorate a class so that it can configure the expected behavior of the class. The metadata is represented by decorators 1. **Class decorators**, e.g. @Component and @NgModule - ```typescript - import { NgModule, Component } from '@angular/core'; + ```typescript + import { NgModule, Component } from '@angular/core'; - @Component({ - selector: 'my-component', - template: '
    Class decorator
    ', - }) - export class MyComponent { - constructor() { - console.log('Hey I am a component!'); - } - } + @Component({ + selector: 'my-component', + template: '
    Class decorator
    ', + }) + export class MyComponent { + constructor() { + console.log('Hey I am a component!'); + } + } - @NgModule({ - imports: [], - declarations: [], - }) - export class MyModule { - constructor() { - console.log('Hey I am a module!'); - } - } - ``` + @NgModule({ + imports: [], + declarations: [], + }) + export class MyModule { + constructor() { + console.log('Hey I am a module!'); + } + } + ``` 2. **Property decorators** Used for properties inside classes, e.g. @Input and @Output - ```typescript - import { Component, Input } from '@angular/core'; + ```typescript + import { Component, Input } from '@angular/core'; - @Component({ - selector: 'my-component', - template: '
    Property decorator
    ' - }) + @Component({ + selector: 'my-component', + template: '
    Property decorator
    ' + }) - export class MyComponent { - @Input() - title: string; - } - ``` + export class MyComponent { + @Input() + title: string; + } + ``` 3. **Method decorators** Used for methods inside classes, e.g. @HostListener - ```typescript - import { Component, HostListener } from '@angular/core'; + ```typescript + import { Component, HostListener } from '@angular/core'; - @Component({ - selector: 'my-component', - template: '
    Method decorator
    ' - }) - export class MyComponent { - @HostListener('click', ['$event']) - onHostClick(event: Event) { - // clicked, `event` available + @Component({ + selector: 'my-component', + template: '
    Method decorator
    ' + }) + export class MyComponent { + @HostListener('click', ['$event']) + onHostClick(event: Event) { + // clicked, `event` available + } } - } - ``` - 4. **Parameter decorators** Used for parameters inside class constructors, e.g. @Inject - ```typescript - import { Component, Inject } from '@angular/core'; - import { MyService } from './my-service'; + ``` + 4. **Parameter decorators** Used for parameters inside class constructors, e.g. @Inject, @Optional + ```typescript + import { Component, Inject } from '@angular/core'; + import { MyService } from './my-service'; - @Component({ - selector: 'my-component', - template: '
    Parameter decorator
    ' - }) - export class MyComponent { - constructor(@Inject(MyService) myService) { - console.log(myService); // MyService + @Component({ + selector: 'my-component', + template: '
    Parameter decorator
    ' + }) + export class MyComponent { + constructor(@Inject(MyService) myService) { + console.log(myService); // MyService + } } - } - ``` + + // Angular v18 and above + + import { Component, inject } from '@angular/core'; + import { MyService } from './my-service'; + + @Component({ + selector: 'my-component', + template: '
    Parameter decorator
    ' + }) + export class MyComponent { + myService: MyService = inject(MyService) + constructor() { + console.log(myService); // MyService + } + } + ``` + **[⬆ Back to Top](#table-of-contents)** 14. ### What is angular CLI? Angular CLI(**Command Line Interface**) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. @@ -305,57 +621,103 @@ ``` Below are the list of few commands, which will come handy while creating angular projects 1. **Creating New Project:** ng new + 2. **Generating Components, Directives & Services:** ng generate/g - The different types of commands would be, - * ng generate class my-new-class: add a class to your application - * ng generate component my-new-component: add a component to your application - * ng generate directive my-new-directive: add a directive to your application - * ng generate enum my-new-enum: add an enum to your application - * ng generate module my-new-module: add a module to your application - * ng generate pipe my-new-pipe: add a pipe to your application - * ng generate service my-new-service: add a service to your application + The different types of commands would be, + * ng generate class my-new-class: add a class to your application + * ng generate component my-new-component: add a component to your application + * ng generate directive my-new-directive: add a directive to your application + * ng generate enum my-new-enum: add an enum to your application + * ng generate module my-new-module: add a module to your application + * ng generate pipe my-new-pipe: add a pipe to your application + * ng generate service my-new-service: add a service to your application + 3. **Running the Project:** ng serve + **[⬆ Back to Top](#table-of-contents)** + 15. ### What is the difference between constructor and ngOnInit? - TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. - In order to use ngOnInit, you need to implement OnInit interface as below, + The **Constructor** is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor. + **ngOnInit** is a life cycle hook called by Angular to indicate that Angular is done creating the component. + Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". + So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's where/when components' bindings are resolved. + ```typescript export class App implements OnInit{ - constructor(){ + constructor(private myService: MyService){ //called first time before the ngOnInit() } ngOnInit(){ //called after the constructor and called after the first ngOnChanges() + //e.g. http call... } } ``` + + **[⬆ Back to Top](#table-of-contents)** + 16. ### What is a service? A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components. + Let's create a repoService which can be used across components, + ```typescript import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; - @Injectable() // The Injectable decorator is required for dependency injection to work + @Injectable({ // The Injectable decorator is required for dependency injection to work + // providedIn option registers the service with a specific NgModule + providedIn: 'root', // This declares the service with the root app (AppModule) + }) export class RepoService{ constructor(private http: Http){ } fetchAll(){ - return this.http.get('https://api.github.com/repositories').map(res => res.json()); + return this.http.get('https://api.github.com/repositories'); } } ``` The above service uses Http service as a dependency. + **[⬆ Back to Top](#table-of-contents)** + 17. ### What is dependency injection in Angular? Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application. + **[⬆ Back to Top](#table-of-contents)** + 18. ### How is Dependency Hierarchy formed? + Injectors in Angular have rules that can be leveraged to achieve the desired visibility of injectables in your applications. By understanding these rules, you can determine in which NgModule, Component, or Directive you should declare a provider. + + #### Angular has two injector hierarchies: + ![Screenshot](/images/injector%20hierarchies.png) + + #### Module injector + When angular starts, it creates a root injector where the services will be registered, these are provided via injectable annotation. All services provided in the `ng-model` property are called providers (if those modules are not lazy-loaded). + + Angular recursively goes through all models which are being used in the application and creates instances for provided services in the root injector. If you provide some service in an eagerly-loaded model, the service will be added to the root injector, which makes it available across the whole application. + + #### Platform Module + During application bootstrapping angular creates a few more injectors, above the root injector goes the platform injector, this one is created by the platform browser dynamic function inside the `main.ts` file, and it provides some platform-specific features like `DomSanitizer`. + + #### NullInjector() + At the very top, the next parent injector in the hierarchy is the `NullInjector()`.The responsibility of this injector is to throw the error if something tries to find dependencies there, unless you've used `@Optional()` because ultimately, everything ends at the `NullInjector()` and it returns an error or, in the case of `@Optional()`, `null`. + + ![Screenshot](images/hierarchy%20diagram.png) + + + #### ElementInjector + Angular creates `ElementInjector` hierarchies implicitly for each DOM element. `ElementInjector` injector is being created for any tag that matches the angular component, or any tag on which directive is applied, and you can configure it in component and directive annotations inside the provider's property, thus, it creates its own hierarchy likewise the upper one. + + ![Screenshot](images/element%20injector%20hieracrhy.png) + + **[⬆ Back to Top](#table-of-contents)** 19. ### What is the purpose of async pipe? The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes. + Let's take a time observable which continuously updates the view for every 2 seconds with the current time. ```typescript @Component({ @@ -364,35 +726,53 @@ Time: {{ time | async }}` }) export class AsyncObservablePipeComponent { - time = new Observable(observer => - setInterval(() => observer.next(new Date().toString()), 2000) - ); + time: Observable; + constructor() { + this.time = new Observable((observer) => { + setInterval(() => { + observer.next(new Date().toString()); + }, 2000); + }); + } } ``` + + **[⬆ Back to Top](#table-of-contents)** + 20. ### What is the option to choose between inline and external template file? You can store your component's template in one of two places. You can define it inline using the **template** property, or you can define the template in a separate HTML file and link to it in the component metadata using the **@Component** decorator's **templateUrl** property. + The choice between inline and separate HTML is a matter of taste, circumstances, and organization policy. But normally we use inline template for small portion of code and external template file for bigger views. By default, the Angular CLI generates components with a template file. But you can override that with the below command, ``` ng generate component hero -it ``` -21. ### What is the purpose of ngFor directive? - We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users, + + **[⬆ Back to Top](#table-of-contents)** + +21. ### What is the purpose of `*ngFor` directive? + We use Angular `*ngFor` directive in the template to display each item in the list. For example, here we can iterate over a list of users: ```html
  • {{ user }}
    • ``` - The user variable in the ngFor double-quoted instruction is a **template input variable** -22. ### What is the purpose of ngIf directive? - Sometimes an app needs to display a view or a portion of a view only under specific circumstances. The Angular ngIf directive inserts or removes an element based on a truthy/falsy condition. Let's take an example to display a message if the user age is more than 18, + The user variable in the `*ngFor` double-quoted instruction is a **template input variable**. + + **[⬆ Back to Top](#table-of-contents)** + +22. ### What is the purpose of `*ngIf` directive? + Sometimes an app needs to display a view or a portion of a view only under specific circumstances. The Angular `*ngIf` directive inserts or removes an element based on a truthy/falsy condition. Let's take an example to display a message if the user age is more than 18: ```html

    You are not eligible for student pass!

    ``` **Note:** Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in the larger projects with many data bindings. + **[⬆ Back to Top](#table-of-contents)** + 23. ### What happens if you use script tag inside template? - Angular recognizes the value as unsafe and automatically sanitizes it, which removes the **"); + } + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 108. ### What is a service worker and its role in Angular? + A service worker is a script that runs in the web browser and manages caching for an application. Starting from 5.0.0 version, Angular ships with a service worker implementation. Angular service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content. + + **[⬆ Back to Top](#table-of-contents)** + + 109. ### What are the design goals of service workers? + Below are the list of design goals of Angular's service workers, + + 1. It caches an application just like installing a native application + 2. A running application continues to run with the same version of all files without any incompatible files + 3. When you refresh the application, it loads the latest fully cached version + 4. When changes are published then it immediately updates in the background + 5. Service workers saves the bandwidth by downloading the resources only when they changed. + + **[⬆ Back to Top](#table-of-contents)** + + 110. ### What are the differences between AngularJS and Angular with respect to dependency injection? + Dependency injection is a common component in both AngularJS and Angular, but there are some key differences between the two frameworks in how it actually works. + + | AngularJS | Angular | + |---- | --------- + | Dependency injection tokens are always strings | Tokens can have different types. They are often classes and sometimes can be strings. | + | There is exactly one injector even though it is a multi-module applications | There is a tree hierarchy of injectors, with a root injector and an additional injector for each component. | + + **[⬆ Back to Top](#table-of-contents)** + + 111. ### What is Angular Ivy? + Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8. + + 1. You can enable ivy in a new project by using the --enable-ivy flag with the ng new command + + ```bash + ng new ivy-demo-app --enable-ivy + ``` + 2. You can add it to an existing project by adding `enableIvy` option in the `angularCompilerOptions` in your project's `tsconfig.app.json`. + + ```javascript + { + "compilerOptions": { ... }, + "angularCompilerOptions": { + "enableIvy": true + } + } + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 112. ### What are the features included in ivy preview? + You can expect below features with Ivy preview, + + 1. Generated code that is easier to read and debug at runtime + 2. Faster re-build time + 3. Improved payload size + 4. Improved template type checking + + **[⬆ Back to Top](#table-of-contents)** + + 113. ### Can I use AOT compilation with Ivy? + Yes, it is a recommended configuration. Also, AOT compilation with Ivy is faster. So you need set the default build options(with in angular.json) for your project to always use AOT compilation. + + ```javascript + { + "projects": { + "my-project": { + "architect": { + "build": { + "options": { + ... + "aot": true, + } + } + } + } + } + } + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 114. ### What is Angular Language Service? + The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates whether they are external in an HTML file or embedded in annotations/decorators in a string. It has the ability to autodetect that you are opening an Angular file, reads your `tsconfig.json` file, finds all the templates you have in your application, and then provides all the language services. + + **[⬆ Back to Top](#table-of-contents)** + + 115. ### How do you install angular language service in the project? + You can install Angular Language Service in your project with the following npm command, + + ```javascript + npm install --save-dev @angular/language-service + ``` + After that add the following to the "compilerOptions" section of your project's tsconfig.json + + ```javascript + "plugins": [ + {"name": "@angular/language-service"} + ] + ``` + **Note:** The completion and diagnostic services works for .ts files only. You need to use custom plugins for supporting HTML files. + + **[⬆ Back to Top](#table-of-contents)** + + 116. ### Is there any editor support for Angular Language Service? + Yes, Angular Language Service is currently available for Visual Studio Code and WebStorm IDEs. You need to install angular language service using an extension and devDependency respectively. In sublime editor, you need to install typescript which has has a language service plugin model. + + **[⬆ Back to Top](#table-of-contents)** + + 117. ### Explain the features provided by Angular Language Service? + Basically there are 3 main features provided by Angular Language Service, + + 1. **Autocompletion:** Autocompletion can speed up your development time by providing you with contextual possibilities and hints as you type with in an interpolation and elements. + + ![ScreenShot](images/language-completion.gif) + + 2. **Error checking:** It can also warn you of mistakes in your code. + + ![ScreenShot](images/language-error.gif) + + 3. **Navigation:** Navigation allows you to hover a component, directive, module and then click and press F12 to go directly to its definition. + + ![ScreenShot](images/language-navigation.gif) + + **[⬆ Back to Top](#table-of-contents)** + + 118. ### How do you add web workers in your application? + You can add web worker anywhere in your application. For example, If the file that contains your expensive computation is `src/app/app.component.ts`, you can add a Web Worker using `ng generate web-worker app` command which will create `src/app/app.worker.ts` web worker file. This command will perform below actions, + + 1. Configure your project to use Web Workers + 2. Adds app.worker.ts to receive messages + ```javascript + addEventListener('message', ({ data }) => { + const response = `worker response to ${data}`; + postMessage(response); + }); + ``` + 3. The component `app.component.ts` file updated with web worker file + ```javascript + if (typeof Worker !== 'undefined') { + // Create a new + const worker = new Worker('./app.worker', { type: 'module' }); + worker.onmessage = ({ data }) => { + console.log('page got message: $\{data\}'); + }; + worker.postMessage('hello'); + } else { + // Web Workers are not supported in this environment. + } + ``` + + **Note:** You may need to refactor your initial scaffolding web worker code for sending messages to and from. + + **[⬆ Back to Top](#table-of-contents)** + + 119. ### What are the limitations with web workers? + You need to remember two important things when using Web Workers in Angular projects, + + 1. Some environments or platforms(like @angular/platform-server) used in Server-side Rendering, don't support Web Workers. In this case you need to provide a fallback mechanism to perform the computations to work in this environments. + 2. Running Angular in web worker using `@angular/platform-webworker` is not yet supported in Angular CLI. + + **[⬆ Back to Top](#table-of-contents)** + + 120. ### What is Angular CLI Builder? + In Angular8, the CLI Builder API is stable and available to developers who want to customize the `Angular CLI` by adding or modifying commands. For example, you could supply a builder to perform an entirely new task, or to change which third-party tool is used by an existing command. + + **[⬆ Back to Top](#table-of-contents)** + + 121. ### What is a builder? + A builder function is a function that uses the `Architect API` to perform a complex process such as "build" or "test". The builder code is defined in an npm package. For example, BrowserBuilder runs a webpack build for a browser target and KarmaBuilder starts the Karma server and runs a webpack build for unit tests. + + **[⬆ Back to Top](#table-of-contents)** + + 122. ### How do you invoke a builder? + The Angular CLI command `ng run` is used to invoke a builder with a specific target configuration. The workspace configuration file, `angular.json`, contains default configurations for built-in builders. + + **[⬆ Back to Top](#table-of-contents)** + + 123. ### How do you create app shell in Angular? + An App shell is a way to render a portion of your application via a route at build time. This is useful to first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript. You can achieve this using Angular CLI which generates an app shell for running server-side of your app. + + ```javascript + ng generate appShell [options] (or) + ng g appShell [options] + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 124. ### What are the case types in Angular? + Angular uses capitalization conventions to distinguish the names of various types. Angular follows the list of the below case types. + + 1. **camelCase :** Symbols, properties, methods, pipe names, non-component directive selectors, constants uses lowercase on the first letter of the item. For example, "selectedUser" + 2. **UpperCamelCase (or PascalCase):** Class names, including classes that define components, interfaces, NgModules, directives, and pipes uses uppercase on the first letter of the item. + 3. **dash-case (or "kebab-case"):** The descriptive part of file names, component selectors uses dashes between the words. For example, "app-user-list". + 4. **UPPER_UNDERSCORE_CASE:** All constants uses capital letters connected with underscores. For example, "NUMBER_OF_USERS". + + **[⬆ Back to Top](#table-of-contents)** + + 125. ### What are the class decorators in Angular? + A class decorator is a decorator that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type + + The following list of decorators comes under class decorators, + + 1. @Component() + 2. @Directive() + 3. @Pipe() + 4. @Injectable() + 5. @NgModule() + + **[⬆ Back to Top](#table-of-contents)** + + 126. ### What are class field decorators? + The class field decorators are the statements declared immediately before a field in a class definition that defines the type of that field. Some of the examples are: @input and @output, + + ```javascript + @Input() myProperty; + @Output() myEvent = new EventEmitter(); + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 127. ### What is declarable in Angular? + Declarable is a class type that you can add to the declarations list of an NgModule. The class types such as components, directives, and pipes comes can be declared in the module. The structure of declarations would be, + + ```javascript + declarations: [ + YourComponent, + YourPipe, + YourDirective + ], + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 128. ### What are the restrictions on declarable classes? + Below classes shouldn't be declared, + + 1. A class that's already declared in another NgModule + 2. Ngmodule classes + 3. Service classes + 4. Helper classes + + **[⬆ Back to Top](#table-of-contents)** + + 129. ### What is a DI token? + A DI token is a lookup token associated with a dependency provider in dependency injection system. The injector maintains an internal token-provider map that it references when asked for a dependency and the DI token is the key to the map. Let's take example of DI Token usage, + + ```javascript + const BASE_URL = new InjectionToken('BaseUrl'); + const injector = + Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]}); + const url = injector.get(BASE_URL); + ``` + + **[⬆ Back to Top](#table-of-contents)** + + 130. ### What is Angular DSL? + A domain-specific language (DSL) is a computer language specialized to a particular application domain. Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific html-like syntax on top of normal html. It has its own compiler that compiles this syntax to html that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation. + + Basically you will see 3 main syntax in Angular DSL. + + 1. `()`: Used for Output and DOM events. + 2. `[]`: Used for Input and specific DOM element attributes. + 3. `*`: Structural directives(*ngFor or *ngIf) will affect/change the DOM structure. + + **[⬆ Back to Top](#table-of-contents)** + +131. ### What is an RxJS Subject in Angular? + 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. + + A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. + + ``` typescript + import { Subject } from 'rxjs'; + + const subject = new Subject(); + + subject.subscribe({ + next: (v) => console.log(`observerA: ${v}`) + }); + subject.subscribe({ + next: (v) => console.log(`observerB: ${v}`) + }); + + subject.next(1); + subject.next(2); + ``` + + **[⬆ Back to Top](#table-of-contents)** + +132. ### What is Bazel tool? + Bazel is a powerful build tool developed and massively used by Google and it can keep track of the dependencies between different packages and build targets. In Angular8, you can build your CLI application with Bazel. + **Note:** The Angular framework itself is built with Bazel. + + **[⬆ Back to Top](#table-of-contents)** + +133. ### What are the advantages of Bazel tool? + Below are the list of key advantages of Bazel tool, + + 1. It creates the possibility of building your back-ends and front-ends with the same tool + 2. The incremental build and tests + 3. It creates the possibility to have remote builds and cache on a build farm. + + **[⬆ Back to Top](#table-of-contents)** + +134. ### How do you use Bazel with Angular CLI? + The @angular/bazel package provides a builder that allows Angular CLI to use Bazel as the build tool. + 1. **Use in an existing application:** Add @angular/bazel using CLI + ```javascript + ng add @angular/bazel + ``` + 2. **Use in a new application:** Install the package and create the application with collection option + ```javascript + npm install -g @angular/bazel + ng new --collection=@angular/bazel + ``` + When you use ng build and ng serve commands, Bazel is used behind the scenes and outputs the results in dist/bin folder. + + **[⬆ Back to Top](#table-of-contents)** + +135. ### How do you run Bazel directly? + Sometimes you may want to bypass the Angular CLI builder and run Bazel directly using Bazel CLI. You can install it globally using @bazel/bazel npm package. i.e, Bazel CLI is available under @bazel/bazel package. After you can apply the below common commands, + + ```javascrippt + bazel build [targets] // Compile the default output artifacts of the given targets. + bazel test [targets] // Run the tests with *_test targets found in the pattern. + bazel run [target]: Compile the program represented by target and then run it. + ``` + + **[⬆ Back to Top](#table-of-contents)** + +136. ### What is platform in Angular? + A platform is the context in which an Angular application runs. The most common platform for Angular applications is a web browser, but it can also be an operating system for a mobile device, or a web server. The runtime-platform is provided by the @angular/platform-* packages and these packages allow applications that make use of `@angular/core` and `@angular/common` to execute in different environments. + i.e, Angular can be used as platform-independent framework in different environments, For example, + + 1. While running in the browser, it uses `platform-browser` package. + 2. When SSR(server-side rendering ) is used, it uses `platform-server` package for providing web server implementation. + + **[⬆ Back to Top](#table-of-contents)** + +137. ### What happens if I import the same module twice? + If multiple modules imports the same module then angular evaluates it only once (When it encounters the module first time). It follows this condition even the module appears at any level in a hierarchy of imported NgModules. + + **[⬆ Back to Top](#table-of-contents)** + +138. ### How do you select an element with in a component template? + You can use `@ViewChild` directive to access elements in the view directly. Let's take input element with a reference, + + ```html + + ``` + and define view child directive and access it in ngAfterViewInit lifecycle hook + + ```javascript + @ViewChild('uname') input; + + ngAfterViewInit() { + console.log(this.input.nativeElement.value); + } + ``` + + **[⬆ Back to Top](#table-of-contents)** + +139. ### How do you detect route change in Angular? + In Angular7, you can subscribe to router to detect the changes. The subscription for router events would be as below, + + ```javascript + this.router.events.subscribe((event: Event) => {}) + ``` + Let's take a simple component to detect router changes + + ```javascript + import { Component } from '@angular/core'; + import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router'; + + @Component({ + selector: 'app-root', + template: `` + }) + export class AppComponent { + + constructor(private router: Router) { + + this.router.events.subscribe((event: Event) => { + if (event instanceof NavigationStart) { + // Show loading indicator and perform an action + } + + if (event instanceof NavigationEnd) { + // Hide loading indicator and perform an action + } + + if (event instanceof NavigationError) { + // Hide loading indicator and perform an action + console.log(event.error); // It logs an error for debugging + } + }); + } + } + ``` + + **[⬆ Back to Top](#table-of-contents)** + +140. ### How do you pass headers for HTTP client? + You can directly pass object map for http client or create HttpHeaders class to supply the headers. + + ```javascript + constructor(private _http: HttpClient) {} + this._http.get('someUrl',{ + headers: {'header1':'value1','header2':'value2'} + }); + + (or) + let headers = new HttpHeaders().set('header1', headerValue1); // create header object + headers = headers.append('header2', headerValue2); // add a new header, creating a new object + headers = headers.append('header3', headerValue3); // add another header + + let params = new HttpParams().set('param1', value1); // create params object + params = params.append('param2', value2); // add a new param, creating a new object + params = params.append('param3', value3); // add another param + + return this._http.get('someUrl', { headers: headers, params: params }) + ``` + + **[⬆ Back to Top](#table-of-contents)** + +141. ### What is the purpose of differential loading in CLI? + From Angular8 release onwards, the applications are built using differential loading strategy from CLI to build two separate bundles as part of your deployed application. + + 1. The first build contains ES2015 syntax which takes the advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size. + 2. The second build contains old ES5 syntax to support older browsers with all necessary polyfills. But this results in a larger bundle size. + + **Note:** This strategy is used to support multiple browsers but it only load the code that the browser needs. + + **[⬆ Back to Top](#table-of-contents)** + +142. ### Does Angular support dynamic imports? + 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. + 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. + ```javascript + {path: ‘user’, loadChildren: ‘./users/user.module#UserModulee’}, + ``` + This problem is resolved by using dynamic imports and IDEs are able to find it during compile time itself. + ```javascript + {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)}; + ``` + + **[⬆ Back to Top](#table-of-contents)** + +143. ### What is lazy loading? + Lazy loading is one of the most useful concepts of Angular Routing. It helps us to download the web pages in chunks instead of downloading everything in a big bundle. It is used for lazy loading by asynchronously loading the feature module for routing whenever required using the property `loadChildren`. Let's load both `Customer` and `Order` feature modules lazily as below, + ```javascript + const routes: Routes = [ + { + path: 'customers', + loadChildren: () => import('./customers/customers.module').then(module => module.CustomersModule) + }, + { + path: 'orders', + loadChildren: () => import('./orders/orders.module').then(module => module.OrdersModule) + }, + { + path: '', + redirectTo: '', + pathMatch: 'full' + } + ]; + ``` + + **[⬆ Back to Top](#table-of-contents)** + +144. ### What are workspace APIs? + Angular 8.0 release introduces Workspace APIs to make it easier for developers to read and modify the angular.json file instead of manually modifying it. Currently, the only supported storage3 format is the JSON-based format used by the Angular CLI. You can enable or add optimization option for build target as below, + ```javascript + import { NodeJsSyncHost } from '@angular-devkit/core/node'; + import { workspaces } from '@angular-devkit/core'; + + async function addBuildTargetOption() { + const host = workspaces.createWorkspaceHost(new NodeJsSyncHost()); + const workspace = await workspaces.readWorkspace('path/to/workspace/directory/', host); + + const project = workspace.projects.get('my-app'); + if (!project) { + throw new Error('my-app does not exist'); + } + + const buildTarget = project.targets.get('build'); + if (!buildTarget) { + throw new Error('build target does not exist'); + } + + buildTarget.options.optimization = true; + + await workspaces.writeWorkspace(workspace, host); + } + + addBuildTargetOption(); + ``` + + **[⬆ Back to Top](#table-of-contents)** + +145. ### How do you upgrade angular version? + The Angular upgrade is quite easier using Angular CLI `ng update` command as mentioned below. For example, if you upgrade from Angular 7 to 8 then your lazy loaded route imports will be migrated to the new import syntax automatically. + ```bash + $ ng update @angular/cli @angular/core + ``` + + **[⬆ Back to Top](#table-of-contents)** + +146. ### What is Angular Material? + Angular Material is a collection of Material Design components for Angular framework following the Material Design spec. You can apply Material Design very easily using Angular Material. The installation can be done through npm or yarn, + ```bash + npm install --save @angular/material @angular/cdk @angular/animations + (OR) + yarn add @angular/material @angular/cdk @angular/animations + ``` + It supports the most recent two versions of all major browsers. The latest version of Angular material is 8.1.1 + + **[⬆ Back to Top](#table-of-contents)** + +147. ### How do you upgrade location service of angularjs? + If you are using `$location` service in your old AngularJS application, now you can use `LocationUpgradeModule`(unified location service) which puts the responsibilities of `$location` service to `Location` service in Angular. Let's add this module to `AppModule` as below, + ```javascript + // Other imports ... + import { LocationUpgradeModule } from '@angular/common/upgrade'; + + @NgModule({ + imports: [ + // Other NgModule imports... + LocationUpgradeModule.config() + ] + }) + export class AppModule {} + ``` + + **[⬆ Back to Top](#table-of-contents)** + +148. ### What is NgUpgrade? + NgUpgrade is a library put together by the Angular team, which you can use in your applications to mix and match AngularJS and Angular components and bridge the AngularJS and Angular dependency injection systems. + + **[⬆ Back to Top](#table-of-contents)** + +149. ### How do you test Angular application using CLI? + Angular CLI downloads and install everything needed with the Jasmine Test framework. You just need to run `ng test` to see the test results. By default this command builds the app in watch mode, and launches the `Karma test runner`. The output of test results would be as below, + ```bash + 10% building modules 1/1 modules 0 active + ...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ + ...INFO [launcher]: Launching browser Chrome ... + ...INFO [launcher]: Starting browser Chrome + ...INFO [Chrome ...]: Connected on socket ... + Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs) + ``` + **Note:** A chrome browser also opens and displays the test output in the "Jasmine HTML Reporter". + + **[⬆ Back to Top](#table-of-contents)** + +150. ### How to use polyfills in Angular application? + The Angular CLI provides support for polyfills officially. When you create a new project with the ng new command, a `src/polyfills.ts` configuration file is created as part of your project folder. This file includes the mandatory and many of the optional polyfills as JavaScript import statements. Let's categorize the polyfills, + + 1. **Mandatory polyfills:** These are installed automatically when you create your project with ng new command and the respective import statements enabled in 'src/polyfills.ts' file. + 2. **Optional polyfills:** You need to install its npm package and then create import statement in 'src/polyfills.ts' file. + For example, first you need to install below npm package for adding web animations (optional) polyfill. + ```bash + npm install --save web-animations-js + ``` + and create import statement in polyfill file. + ```javascript + import 'web-animations-js'; + ``` + + **[⬆ Back to Top](#table-of-contents)** + +151. ### What are the ways to trigger change detection in Angular? + You can inject either ApplicationRef or NgZone, or ChangeDetectorRef into your component and apply below specific methods to trigger change detection in Angular. i.e, There are 3 possible ways, + + 1. **ApplicationRef.tick():** Invoke this method to explicitly process change detection and its side-effects. It check the full component tree. + 2. **NgZone.run(callback):** It evaluate the callback function inside the Angular zone. + 3. **ChangeDetectorRef.detectChanges():** It detects only the components and it's children. + + **[⬆ Back to Top](#table-of-contents)** + +152. ### What are the differences of various versions of Angular? + There are different versions of Angular framework. Let's see the features of all the various versions, + + 1. **Angular 1:** + * Angular 1 (AngularJS) is the first angular framework released in the year 2010. + * AngularJS is not built for mobile devices. + * It is based on controllers with MVC architecture. + 2. **Angular 2:** + * Angular 2 was released in the year 2016. Angular 2 is a complete rewrite of Angular1 version. + * The performance issues that Angular 1 version had has been addressed in Angular 2 version. + * Angular 2 is built from scratch for mobile devices unlike Angular 1 version. + * Angular 2 is components based. + 3. **Angular 3:** + * The following are the different package versions in Angular 2: + * @angular/core v2.3.0 + * @angular/compiler v2.3.0 + * @angular/http v2.3.0 + * @angular/router v3.3.0 + * The router package is already versioned 3 so to avoid confusion switched to Angular 4 version and skipped 3 version. + 4. **Angular 4:** + * The compiler generated code file size in AOT mode is very much reduced. + * With Angular 4 the production bundles size is reduced by hundreds of KB’s. + * Animation features are removed from angular/core and formed as a separate package. + * Supports Typescript 2.1 and 2.2. + * Angular Universal + * New HttpClient + 5. **Angular 5:** + * Angular 5 makes angular faster. It improved the loading time and execution time. + * Shipped with new build optimizer. + * Supports Typescript 2.5. + * Service Worker + 6. **Angular 6:** + * It is released in May 2018. + * Includes Angular Command Line Interface (CLI), Component Development KIT (CDK), Angular Material Package, Angular Elements. + * Service Worker bug fixes. + * i18n + * Experimental mode for Ivy. + * RxJS 6.0 + * Tree Shaking + 7. **Angular 7:** + * It is released in October 2018. + * TypeScript 3.1 + * RxJS 6.3 + * New Angular CLI + * CLI Prompts capability provide an ability to ask questions to the user before they run. It is like interactive dialog between the user and the CLI + * With the improved CLI Prompts capability, it helps developers to make the decision. New ng commands ask users for routing and CSS styles types(SCSS) and ng add @angular/material asks for themes and gestures or animations. + 8. **Angular 8:** + * It is released in May 2019. + * TypeScript 3.4 + 9. **Angular 9:** + * It is released in February 2020. + * TypeScript 3.7 + * Ivy enabled by default + 10. **Angular 10:** + * It is released in June 2020. + * TypeScript 3.9 + * TSlib 2.0 + + **[⬆ Back to Top](#table-of-contents)** + +153. ### What are the security principles in angular? + Below are the list of security principles in angular, + + 1. You should avoid direct use of the DOM APIs. + 2. You should enable Content Security Policy (CSP) and configure your web server to return appropriate CSP HTTP headers. + 3. You should Use the offline template compiler. + 4. You should Use Server Side XSS protection. + 5. You should Use DOM Sanitizer. + 6. You should Preventing CSRF or XSRF attacks. + + **[⬆ Back to Top](#table-of-contents)** + +154. ### What is the reason to deprecate Web Tracing Framework? + Angular has supported the integration with the Web Tracing Framework (WTF) for the purpose of performance testing. Since it is not well maintained and failed in majority of the applications, the support is deprecated in latest releases. + + **[⬆ Back to Top](#table-of-contents)** + +155. ### What is the reason to deprecate web worker packages? + Both `@angular/platform-webworker` and `@angular/platform-webworker-dynamic` are officially deprecated, the Angular team realized it's not good practice to run the Angular application on Web worker + + **[⬆ Back to Top](#table-of-contents)** + +156. ### How do you find angular CLI version? + Angular CLI provides it's installed version using below different ways using ng command, + + ```bash + ng v + ng version + ng -v + ng --version + ``` + and the output would be as below, + + ```bash + Angular CLI: 1.6.3 + Node: 8.11.3 + OS: darwin x64 + Angular: + ... + ``` + + **[⬆ Back to Top](#table-of-contents)** + +157. ### What is the browser support for Angular? + Angular supports most recent browsers which includes both desktop and mobile browsers. As of Angular 13+, IE is no longer supported. + + | Browser | Version | + |---- | --------- | + | Chrome | 2 most recent major versions | + | Firefox | 2 most recent major versions | + | Edge | 2 most recent major versions | + | Safari | 2 most recent major versions | + | iOS | 2 most recent major versions | + | Android | 2 most recent major versions | + + **[⬆ Back to Top](#table-of-contents)** + +158. ### What is schematic? + It's a scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. It defines rules that operate on a virtual file system called a tree. + + **[⬆ Back to Top](#table-of-contents)** + +159. ### What is rule in Schematics? + + In schematics world, it's a function that operates on a file tree to create, delete, or modify files in a specific manner. + + **[⬆ Back to Top](#table-of-contents)** + +160. ### What is Schematics CLI? + Schematics come with their own command-line tool known as Schematics CLI. It is used to install the schematics executable, which you can use to create a new schematics collection with an initial named schematic. The collection folder is a workspace for schematics. You can also use the schematics command to add a new schematic to an existing collection, or extend an existing schematic. You can install Schematic CLI globally as below, + ```bash + npm install -g @angular-devkit/schematics-cli + ``` + + **[⬆ Back to Top](#table-of-contents)** + +161. ### What are the best practices for security in angular? + Below are the best practices of security in angular, + + 1. Use the latest Angular library releases + 2. Don't modify your copy of Angular + 3. Avoid Angular APIs marked in the documentation as “Security Risk.” + + **[⬆ Back to Top](#table-of-contents)** + +162. ### What is Angular security model for preventing XSS attacks? + Angular treats all values as untrusted by default. i.e, Angular sanitizes and escapes untrusted values When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation. + + **[⬆ Back to Top](#table-of-contents)** + +163. ### What is the role of template compiler for prevention of XSS attacks? + The offline template compiler prevents vulnerabilities caused by template injection, and greatly improves application performance. So it is recommended to use offline template compiler in production deployments without dynamically generating any template. + + **[⬆ Back to Top](#table-of-contents)** + +164. ### What are the various security contexts in Angular? + Angular defines the following security contexts for sanitization, + + 1. **HTML:** It is used when interpreting a value as HTML such as binding to innerHtml. + 2. **Style:** It is used when binding CSS into the style property. + 3. **URL:** It is used for URL properties such as ``. + 4. **Resource URL:** It is a URL that will be loaded and executed as code such as ` Code attached'; + } + ``` + Even though innerHTML binding create a chance of XSS attack, Angular recognizes the value as unsafe and automatically sanitizes it. + + **[⬆ Back to Top](#table-of-contents)** + +168. ### How do you prevent automatic sanitization? + Sometimes the applications genuinely need to include executable code such as displaying `