{"id":18850550,"url":"https://github.com/manthanank/learn-angular","last_synced_at":"2025-10-14T14:43:00.289Z","repository":{"id":65683327,"uuid":"587799765","full_name":"manthanank/learn-angular","owner":"manthanank","description":"Complete Guide to Learn Angular.","archived":false,"fork":false,"pushed_at":"2025-05-21T03:36:19.000Z","size":1928,"stargazers_count":66,"open_issues_count":0,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-03T15:56:24.594Z","etag":null,"topics":["angular","learn","learn-angular","learning-angular","rxjs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manthanank.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["manthanank"],"open_collective":"manthanank","buy_me_a_coffee":"manthanank","patreon":"manthanank"}},"created_at":"2023-01-11T16:05:22.000Z","updated_at":"2025-09-15T07:02:07.000Z","dependencies_parsed_at":"2024-05-08T05:28:01.837Z","dependency_job_id":"463919f1-775b-476b-be1b-fecf88c28c04","html_url":"https://github.com/manthanank/learn-angular","commit_stats":null,"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"purl":"pkg:github/manthanank/learn-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/learn-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019157,"owners_count":26086682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","learn","learn-angular","learning-angular","rxjs"],"created_at":"2024-11-08T03:29:52.687Z","updated_at":"2025-10-14T14:43:00.270Z","avatar_url":"https://github.com/manthanank.png","language":"HTML","readme":"# Learn Angular\r\n\r\nThis repository contains a list of resources to learn Angular. It includes tutorials, articles, videos, books, and other resources to help you learn Angular from scratch.\r\n\r\n![npm](https://img.shields.io/npm/dw/learn-angular)\r\n![npm](https://img.shields.io/npm/dm/learn-angular)\r\n![npm](https://img.shields.io/npm/dy/learn-angular)\r\n![npm](https://img.shields.io/npm/dt/learn-angular)\r\n![GitHub issues](https://img.shields.io/github/issues/manthanank/learn-angular)\r\n![GitHub pull requests](https://img.shields.io/github/issues-pr/manthanank/learn-angular)\r\n![GitHub](https://img.shields.io/github/license/manthanank/learn-angular)\r\n![GitHub last commit](https://img.shields.io/github/last-commit/manthanank/learn-angular)\r\n![GitHub top language](https://img.shields.io/github/languages/top/manthanank/learn-angular)\r\n![GitHub repo size](https://img.shields.io/github/repo-size/manthanank/learn-angular)\r\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/manthanank/learn-angular)\r\n![GitHub contributors](https://img.shields.io/github/contributors/manthanank/learn-angular)\r\n![GitHub forks](https://img.shields.io/github/forks/manthanank/learn-angular)\r\n![GitHub stars](https://img.shields.io/github/stars/manthanank/learn-angular)\r\n![GitHub watchers](https://img.shields.io/github/watchers/manthanank/learn-angular)\r\n\r\n## Table of Contents\r\n\r\n- [Introduction](#introduction)\r\n - [Features of Angular](#features-of-angular)\r\n - [Difference between AngularJS vs Angular](#difference-between-angularjs-vs-angular)\r\n - [Angular vs React](#angular-vs-react)\r\n- [Roadmap](#roadmap)\r\n- [Configuration](#configuration)\r\n - [Prerequisites](#prerequisites)\r\n - [Installation](#installation)\r\n- [Components](#components)\r\n - [Three main building blocks](#three-main-building-blocks)\r\n - [Component Creation](#component-creation)\r\n - [Using Angular CLI](#using-angular-cli)\r\n - [Manual Creation](#manual-creation)\r\n - [Example](#example)\r\n - [Scope](#scope)\r\n - [View Encapsulation](#view-encapsulation)\r\n - [Emulated View Encapsulation](#emulated-view-encapsulation)\r\n - [Shadow DOM View Encapsulation](#shadow-dom-view-encapsulation)\r\n - [None View Encapsulation](#none-view-encapsulation)\r\n - [Component Communication](#component-communication)\r\n - [Parent to Child](#parent-to-child)\r\n - [Child to Parent](#child-to-parent)\r\n- [Standalone Components](#standalone-components)\r\n- [Data Binding](#data-binding)\r\n - [One Way Binding](#one-way-binding)\r\n - [Two Way Binding](#two-ways-binding)\r\n- [Directives](#directives)\r\n - [Structural Directives](#structural-directives)\r\n - [Attribute Directives](#attribute-directives)\r\n - [Custom Directives](#custom-directives)\r\n - [Other Directives](#other-directives)\r\n- [New Control Flow](#new-control-flow)\r\n- [Pipes](#pipes)\r\n - [Date Pipe](#date-pipe)\r\n - [Uppercase Pipe](#uppercase-pipe)\r\n - [Lowercase Pipe](#lowercase-pipe)\r\n - [Currency Pipe](#currency-pipe)\r\n - [Percent Pipe](#percent-pipe)\r\n - [Slice Pipe](#slice-pipe)\r\n - [Decimal/number Pipe](#decimalnumber-pipe)\r\n - [JSON Pipe](#json-pipe)\r\n - [Async Pipe](#async-pipe)\r\n- [Decorators](#decorators)\r\n - [Input](#input)\r\n - [Output](#output)\r\n - [HostListener](#hostlistener)\r\n - [ContentChild \u0026 ContentChildren](#contentchild--contentchildren)\r\n - [ViewChild \u0026 ViewChildren](#viewchild--viewchildren)\r\n - [HostListener](#hostlistener)\r\n - [ContentChild \u0026 ContentChildren](#contentchild--contentchildren)\r\n - [ViewChild \u0026 ViewChildren](#viewchild--viewchildren)\r\n- [Life Cycle Hooks](#life-cycle-hooks)\r\n - [OnChanges](#onchanges)\r\n - [OnInit](#oninit)\r\n - [DoCheck](#docheck)\r\n - [AfterViewInit](#afterviewinit)\r\n - [AfterViewChecked](#afterviewchecked)\r\n - [AfterContentInit](#aftercontentinit)\r\n - [AfterContentChecked](#aftercontentchecked)\r\n - [OnDestroy](#ondestroy)\r\n- [Forms](#forms)\r\n - [Template Driven Forms](#template-driven-forms)\r\n - [Reactive Forms](#reactive-forms)\r\n- [Services](#services)\r\n - [Injectable Decorator](#injectable-decorator)\r\n - [Dependency Injection](#dependency-injection)\r\n - [Providers](#providers)\r\n- [Routing](#routing)\r\n - [Router Outlet](#router-outlet)\r\n - [Router Link](#router-link)\r\n - [Router Link Active](#router-link-active)\r\n - [Router State](#router-state)\r\n - [Router Events](#router-events)\r\n - [Router Guards](#router-guards)\r\n- [Lazy Loading](#lazy-loading)\r\n- [HTTP Client](#http-client)\r\n- [Destroy Ref](#destroy-ref)\r\n- [Http](#http)\r\n- [Module](#module)\r\n- [Router](#router)\r\n- [Route Parameter](#route-parameters)\r\n- [Route Guards](#route-guards)\r\n- [Observables](#observables-in-angular)\r\n - [Creating Observables](#creating-observables)\r\n - [Subscribing to Observables](#subscribing-to-observables)\r\n - [Difference between Observables and Promises in Angular](#difference-between-observables-and-promises-in-angular)\r\n- [Unsubscribe](#unsubscribe-in-angular)\r\n- [Renderer2](#renderer2)\r\n- [JIT](#jit)\r\n- [AOT](#aot)\r\n- [Deferrable Views](#deferrable-views)\r\n- [Meta Tags](#meta-tags)\r\n - [Title Service](#title-service)\r\n - [Dynamic Title](#dynamic-title)\r\n - [Meta Service](#meta-service)\r\n- [Angular Signals](#angular-signals)\r\n- [Security](#security)\r\n - [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)\r\n - [Angular's cross-site scripting security model](#angulars-cross-site-scripting-security-model)\r\n - [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)\r\n - [Angular's cross-site scripting security model](#angulars-cross-site-scripting-security-model)\r\n - [Sanitization and security contexts](#sanitization-and-security-contexts)\r\n - [Sanitization example](#sanitization-example)\r\n - [Direct use of the DOM APIs and explicit sanitization calls](#direct-use-of-the-dom-apis-and-explicit-sanitization-calls)\r\n - [Trusting safe values](#trusting-safe-values)\r\n - [Content security policy](#content-security-policy)\r\n - [Enforcing Trusted Types](#enforcing-trusted-types)\r\n - [Use the AOT template compiler](#use-the-aot-template-compiler)\r\n - [Server-side XSS protection](#server-side-xss-protection)\r\n - [HTTP-level vulnerabilities](#http-level-vulnerabilities)\r\n - [Cross-site request forgery](#cross-site-request-forgery)\r\n - [HttpClient XSRF/CSRF security](#httpclient-xsrfcsrf-security)\r\n - [Configure custom cookie/header names](#configure-custom-cookieheader-names)\r\n - [Disabling XSRF protection](#disabling-xsrf-protection)\r\n - [Cross-site script inclusion (XSSI)](#cross-site-script-inclusion-xssi)\r\n - [Auditing Angular applications](#auditing-angular-applications)\r\n- [Angular Animations](#angular-animations)\r\n - [Installing Angular Animations](#installing-angular-animations)\r\n- [Angular Universal](#angular-universal)\r\n - [Creating an Angular Universal application](#creating-an-angular-universal-application)\r\n- [Bootstrap](#bootstrap)\r\n - [Installing Bootstrap](#installing-bootstrap)\r\n - [Importing Bootstrap](#importing-bootstrap)\r\n- [Angular Material](#angular-material)\r\n - [Installing Angular Material](#installing-angular-material)\r\n - [Importing Angular Material](#importing-angular-material)\r\n- [Tailwind CSS](#tailwind-css)\r\n - [Installing Tailwind CSS](#installing-tailwind-css)\r\n - [Importing Tailwind CSS](#importing-tailwind-css)\r\n- [PrimeNG](#primeng)\r\n - [Installing PrimeNG](#installing-primeng)\r\n - [Importing PrimeNG](#importing-primeng)\r\n- [SPA](#spa)\r\n - [Advantages of SPA](#advantages-of-spa)\r\n- [PWA](#pwa)\r\n - [Installing PWA](#installing-pwa)\r\n - [Configuring PWA](#configuring-pwa)\r\n - [Building PWA](#building-pwa)\r\n - [Service Worker](#service-worker)\r\n - [Features of PWA](#features-of-pwa)\r\n- [CLI Commands](#cli-commands)\r\n- [Version compatibility](#version-compatibility)\r\n- [Deploying an Angular Application](#deploying-an-angular-application)\r\n- [Imports](#imports)\r\n- [TypeScript](#typescript)\r\n- [RxJS](#rxjs)\r\n- [Learn From GitHub Repositories](#learn-more-from-github-repositories)\r\n- [Learn From Websites](#learn-more-from-websites)\r\n- [Learn From Books](#learn-more-from-books)\r\n- [Learn From YouTube Channels](#learn-from-youtube-channels)\r\n- [Learn More From Blogs Sites](#learn-more-from-blogs-sites)\r\n- [List of Online Editors/Compiler for Angular](#list-of-online-editorscompiler-for-angular)\r\n- [List of Twitter Users to Follow](#list-of-twitter-users-to-follow)\r\n- [List of LinkedIn Users to Follow](#list-of-linkedin-users-to-follow)\r\n- [List of Discord Servers to Join](#list-of-discord-servers-to-join)\r\n\r\n## Introduction\r\n\r\n**Angular** is a popular open-source framework by Google for building single-page and dynamic web applications. It offers tools and libraries for components, services, forms, routing, and HTTP client, all built with TypeScript. Angular is known for its performance, scalability, and developer productivity.\r\n\r\n### Features of Angular\r\n\r\n- **Component-Based Architecture**: Reusable, self-contained units of code that define the UI and behavior of a part of the application.\r\n- **Two-Way Data Binding**: Automatic synchronization of data between the model and the view.\r\n- **Dependency Injection**: Provides components with the services they need for better modularity and testability.\r\n- **Routing**: Powerful system for navigation between different views, supporting deep linking, lazy loading, and route guards.\r\n- **Forms**: Tools for template-driven and reactive forms, based on a model-driven approach.\r\n- **HTTP Client**: Simple API for making HTTP requests and handling responses.\r\n- **Observables**: Handles asynchronous operations and event handling.\r\n- **TypeScript**: Superset of JavaScript with static typing, better tooling, error checking, and code completion.\r\n- **Performance**: Optimized for performance with virtual DOM, lazy loading, tree shaking, and ahead-of-time compilation.\r\n- **Mobile Support**: Tools for building responsive, touch-friendly mobile applications, including PWAs.\r\n- **SEO Friendly**: Tools for server-side rendering, pre-rendering, and meta tags to improve search engine visibility.\r\n- **Community Support**: Large, active community providing support and sharing knowledge.\r\n\r\n### Difference between AngularJS vs Angular\r\n\r\n| AngularJS | Angular |\r\n|-----|-----|\r\n|Based on MVC Architecture|Based on Components|\r\n|Uses JavaScript to build the application| Uses TypeScript to build the application|\r\n|No Mobile Support|Mobile supports|\r\n|Run on only client-side|Runs on both client-side as well as server-side|\r\n|CLI not present|CLI present|\r\n|No SEO Friendly|Seo Friendly|\r\n|Performance is slow|Performance is fast|\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Angular vs React\r\n\r\n- **Angular**: A full-fledged framework by Google for building web applications. It includes features like two-way data binding, routing, forms, and HTTP client. Ideal for large, complex applications needing a complete solution.\r\n\r\n- **React**: A JavaScript library by Facebook focused on building user interfaces. It provides a simple, declarative way to build UI components. Suitable for small to medium-sized applications requiring flexibility and customization.\r\n\r\n**Comparison**: Angular offers a complete solution with built-in features, while React focuses on the view layer, allowing developers to choose additional tools and libraries.\r\n\r\n**When to use Angular**: Best for large, complex applications needing integrated tools and scalability.\r\n\r\n**When to use React**: Best for small to medium-sized applications needing flexibility and a focus on the UI.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Roadmap\r\n\r\n[Angular Roadmap](https://roadmap.sh/angular)\r\n\r\n## Configuration\r\n\r\n### Prerequisites\r\n\r\n- Node.js\r\n- NPM\r\n- Angular CLI\r\n\r\n### Installation\r\n\r\nInstall the Angular CLI globally:\r\n\r\n```bash\r\nnpm install -g @angular/cli\r\n```\r\n\r\nIf you are using `pnpm`, you can use the following command:\r\n\r\n```bash\r\npnpm install -g @angular/cli\r\n```\r\n\r\nIf you are using `yarn`, you can use the following command:\r\n\r\n```bash\r\nyarn global add @angular/cli\r\n```\r\n\r\nIf you are using `bun`, you can use the following command:\r\n\r\n```bash\r\nbun install -g @angular/cli\r\n```\r\n\r\nIf you want to install a specific version of the Angular CLI, you can use the following command:\r\n\r\n```bash\r\nnpm install -g @angular/cli@version-number\r\n```\r\n\r\nIf you have already installed the Angular CLI, you can update it to the latest version using the following command:\r\n\r\n```bash\r\nnpm install -g @angular/cli@latest\r\n```\r\n\r\nCheck version\r\n\r\n```bash\r\nng version\r\n```\r\n\r\nCreate a new Angular project: (Replace `[PROJECT NAME]` with your project name)\r\n\r\n```bash\r\n# with standalone component\r\nng new [PROJECT NAME]\r\n\r\n# without standalone component\r\nng new [PROJECT NAME] --standalone=false\r\n\r\n## without routing\r\nng new [PROJECT NAME] --routing=false\r\n\r\n## without testing\r\nng new [PROJECT NAME] --skip-tests=true\r\n\r\n## without dependencies\r\nng new [PROJECT NAME] --skip-install=true\r\n\r\n## without git\r\nng new [PROJECT NAME] --skip-git=true\r\n\r\n## with experimental zonless\r\nng new [PROJECT NAME] --experimental-zoneless\r\n```\r\n\r\n**Note**: In version v16 and earlier, there is no standalone component. In version v17 and later, the standalone component is default enabled. You can enable or disable the standalone component using the `--standalone` flag while creating a new project (In this repository, an example repository is created with the latest version of Angular).\r\n\r\nNavigate to the project directory:\r\n\r\n```bash\r\ncd [PROJECT NAME]\r\n```\r\n\r\nRun the application:\r\n\r\n```bash\r\nng serve\r\n```\r\n\r\nOpen the browser and navigate to `http://localhost:4200/`.\r\n\r\nProject structure(Version 16 and earlier):\r\n\r\n```bash\r\n[PROJECT NAME]\r\n├── node_modules\r\n├── src\r\n│ ├── app\r\n│ │ ├── app.component.css\r\n│ │ ├── app.component.html\r\n│ │ ├── app.component.spec.ts\r\n│ │ ├── app.component.ts\r\n│ │ ├── app.module.ts\r\n│ │ ├── ...\r\n│ ├── assets\r\n│ │ ├── .gitkeep\r\n│ │ └── ...\r\n│ ├── index.html\r\n│ ├── main.ts\r\n│ ├── styles.css\r\n│ ├── favicon.ico\r\n│ └── ...\r\n├── .editorconfig\r\n├── .gitignore\r\n├── angular.json\r\n├── package.json\r\n├── README.md\r\n├── tsconfig.json\r\n├── tslint.json\r\n└── ...\r\n```\r\n\r\nProject structure(Version 17 and later):\r\n\r\n```bash\r\n[PROJECT NAME]\r\n├── node_modules\r\n├── public\r\n│ ├── favicon.ico\r\n│ └── ...\r\n├── src\r\n│ ├── app\r\n│ │ ├── app.component.css\r\n│ │ ├── app.component.html\r\n│ │ ├── app.component.spec.ts\r\n│ │ ├── app.component.ts\r\n│ │ ├── app.config.ts\r\n│ │ ├── app.routes.ts\r\n│ │ └── ...\r\n│ ├── index.html\r\n│ ├── main.ts\r\n│ ├── styles.css\r\n│ └── ...\r\n├── .editorconfig\r\n├── .gitignore\r\n├── angular.json\r\n├── package.json\r\n├── README.md\r\n├── tsconfig.json\r\n├── tslint.json\r\n└── ...\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Components\r\n\r\nComponent is the main building block of an Angular Application. It is a TypeScript class that interacts with the HTML template and provides the data and logic to the view.\r\n\r\n### Three main building blocks\r\n\r\nThere are three main building blocks of an Angular component:\r\n\r\n- Template\r\n- Class\r\n- Metadata\r\n\r\n**Template** - Defines the layout and content of the View.\r\n\r\n**Class** - Class provides the data \u0026 logic to the View.\r\n\r\n**MetaData** - Metadata Provides additional information about the component to the Angular.\r\n\r\n### Component metadata properties\r\n\r\nThere are several properties that can be defined in the component metadata:\r\n\r\n- Selector\r\n- Providers\r\n- Styles\r\n- StyleUrls\r\n- Template\r\n- TemplateUrl\r\n\r\n**Selector** - Defines the element name or CSS selector that identifies the component in the HTML template.\r\n\r\n```typescript\r\nselector: 'app-root'\r\n```\r\n\r\n**Providers** - Defines the providers of the component's dependencies.\r\n\r\n```typescript\r\nproviders: [MyService]\r\n```\r\n\r\n**styles** - Defines the inline styles for the component.\r\n\r\n```typescript\r\nstyles: ['h1 { color: red; }']\r\n```\r\n\r\n**styleUrls** - Defines an array of URLs of the stylesheets for the component.\r\n\r\n```typescript\r\nstyleUrls: ['./app.component.css']\r\n```\r\n\r\n**template** - Defines the HTML template for the component.\r\n\r\n```typescript\r\ntemplate: '\u003ch1\u003eMy Component\u003c/h1\u003e'\r\n```\r\n\r\n**templateUrl** - Defines the URL of the HTML template for the component.\r\n\r\n```typescript\r\ntemplateUrl: './app.component.html'\r\n```\r\n\r\n## Component Creation\r\n\r\n### Using Angular CLI\r\n\r\n```bash\r\nng generate component [component-name]\r\n\r\n# or\r\n\r\nng g c [component-name]\r\n```\r\n\r\n### Manual Creation\r\n\r\n**Step 1** - Create a new folder for the component inside the `src/app` folder.\r\n\r\n```bash\r\nsrc/app/[component-name]\r\n```\r\n\r\n**Step 2** - Create a new TypeScript file for the component inside the new folder.\r\n\r\n```bash\r\nsrc/app/[component-name]/[component-name].component.ts\r\n```\r\n\r\n**Step 3** - Create a new HTML file for the component inside the new folder.\r\n\r\n```bash\r\nsrc/app/[component-name]/[component-name].component.html\r\n```\r\n\r\n**Step 4** - Create a new CSS file for the component inside the new folder.\r\n\r\n```bash\r\nsrc/app/[component-name]/[component-name].component.css\r\n```\r\n\r\n**Step 5** - Import the Component class from the `@angular/core` module.\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n```\r\n\r\n**Step 6** - Decorate the class with the `@Component` decorator.\r\n\r\n```typescript\r\n@Component({\r\n selector: 'app-[component-name]',\r\n standalone: true,\r\n templateUrl: './[component-name].component.html',\r\n styleUrls: ['./[component-name].component.css']\r\n})\r\n```\r\n\r\nIf you want to create a non-standalone component, set the `standalone` property to `false`. The standalone component is enabled by default in Angular v17 and v18.\r\nIn Angular v19 and later, the standalone component is enabled by default and the `standalone` property is not required. You can disable the standalone component by setting the `standalone` property to `false`.\r\n\r\n**Step 7** - Define the selector, template, and styles for the component.\r\n\r\n- selector - The selector for the component.\r\n- templateUrl - The URL of the HTML template for the component.\r\n- styleUrls - An array of URLs of the stylesheets for the component.\r\n\r\n**Step 8** - Export the class.\r\n\r\n```typescript\r\nexport class [ComponentName]Component {\r\n // Component logic here\r\n}\r\n```\r\n\r\n**Step 9** - Import the component class in the `app.module.ts` file.\r\n\r\n```typescript\r\nimport { [ComponentName]Component } from './[component-name]/[component-name].component';\r\n```\r\n\r\n**Step 10** - Add the component to the `declarations` array in the `@NgModule` decorator.\r\n\r\n```typescript\r\ndeclarations: [\r\n AppComponent,\r\n [ComponentName]Component\r\n]\r\n```\r\n\r\nIf you created a standalone component, `app.module.ts` file is not required. You can import the component in the `app.component.ts` file.\r\nas shown below.\r\n\r\n```typescript\r\nimport { [ComponentName]Component } from './[component-name]/[component-name].component';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [[ComponentName]Component],\r\n templateUrl: './app.component.html',\r\n styleUrl: './app.component.scss'\r\n})\r\n\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n**Step 11** - Use the component selector in the HTML template.\r\n\r\n```typescript\r\n\u003capp-[component-name]\u003e\u003c/app-[component-name]\u003e\r\n```\r\n\r\n**Step 12** - Run the application using the `ng serve` command.\r\n\r\n```bash\r\nng serve\r\n\r\n# or\r\n\r\nng serve --open\r\n```\r\n\r\n### Example\r\n\r\n**Creating the component files (Version 16 and earlier)** -\r\n\r\n```bash\r\n//test-component.component.ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'test-component',\r\n templateUrl: './component.component.html',\r\n styleUrls: ['./component.component.css']\r\n})\r\n\r\nexport class TestComponent {\r\n // Component logic here\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--test.component.html--\u003e\r\n\u003ch1\u003eTest Component\u003c/h1\u003e\r\n```\r\n\r\n```css\r\n/*test.component.css*/\r\nh1 {\r\n color: red;\r\n}\r\n```\r\n\r\n**Importing the component in the app.module.ts file** -\r\n\r\n```typescript\r\n//app.module.ts\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { TestComponent } from './test-component.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n TestComponent\r\n ],\r\n imports: [\r\n BrowserModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n**Importing the component in the app.component.ts file** -\r\n\r\n```typescript\r\n//app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { RouterOutlet } from '@angular/router';\r\nimport { TestComponent } from './test-component.component';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrl: './app.component.scss'\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--app.component.html--\u003e\r\n\u003capp-test-component\u003e\u003c/app-test-component\u003e\r\n```\r\n\r\nIn Version 16 and earlier of Angular, there is no standalone component. You need to import the component in the `app.module.ts` file. If you created a non-standalone component, you will see no standalone property in the `@Component` decorator.\r\n\r\n**Creating the component files (Version 17 and 18)** -\r\n\r\n```bash\r\n//test-component.component.ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-test-component',\r\n standalone: true,\r\n templateUrl: './test-component.component.html',\r\n styleUrls: ['./test-component.component.css']\r\n})\r\n\r\nexport class TestComponent {\r\n // Component logic here\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--test.component.html--\u003e\r\n\u003ch1\u003eTest Component\u003c/h1\u003e\r\n```\r\n\r\n```css\r\n/*test.component.css*/\r\nh1 {\r\n color: red;\r\n}\r\n```\r\n\r\n**Importing the component in the app.component.ts file** -\r\n\r\n```typescript\r\n//app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { TestComponent } from './test-component.component';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n imports: [TestComponent],\r\n templateUrl: './app.component.html',\r\n styleUrl: './app.component.scss'\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\nIn version 17 and 18 of Angular, the standalone component is enabled by default with the `standalone` property set to `true` in the `@Component` decorator. You can disable the standalone component by setting the `standalone` property to `false` or not adding the standalone property in the `@Component` decorator.\r\n\r\n**Creating the component files (Version 19 and later)** -\r\n\r\n```bash\r\n//test-component.component.ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-test-component',\r\n templateUrl: './test-component.component.html',\r\n styleUrls: ['./test-component.component.css']\r\n})\r\n\r\nexport class TestComponent {\r\n // Component logic here\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--test.component.html--\u003e\r\n\u003ch1\u003eTest Component\u003c/h1\u003e\r\n```\r\n\r\n```css\r\n/*test.component.css*/\r\nh1 {\r\n color: red;\r\n}\r\n```\r\n\r\n**Importing the component in the app.component.ts file** -\r\n\r\n```typescript\r\n//app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { TestComponent } from './test-component.component';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n imports: [TestComponent],\r\n templateUrl: './app.component.html',\r\n styleUrl: './app.component.scss'\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--app.component.html--\u003e\r\n\u003capp-test-component\u003e\u003c/app-test-component\u003e\r\n```\r\n\r\nIn version 19 and later of Angular, the standalone component is enabled by default. You can disable the standalone component by setting the `standalone` property to `false` in the `@Component` decorator.\r\n\r\nInside app folder, `app.config.ts` file is created by default in version 17 and later of Angular. And `app.routes.ts` file is created by default in version 17 and later of Angular.\r\n\r\n```typescript\r\n// app.config.ts\r\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\r\nimport { provideRouter } from '@angular/router';\r\n\r\nimport { routes } from './app.routes';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideZoneChangeDetection({ eventCoalescing: true }),\r\n provideRouter(routes),\r\n ],\r\n};\r\n```\r\n\r\n```typescript\r\n// app.routes.ts\r\nimport { Routes } from '@angular/router';\r\n\r\nexport const routes: Routes = [];\r\n```\r\n\r\nYou can import the component in the `app.component.ts` file and use the component selector in the HTML template.\r\n\r\n**Creating the inline Template \u0026 StyleUrls** -\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n \r\n@Component({\r\n selector: 'app-root',\r\n template: '\u003ch1\u003e {{title}} works \u003c/h1\u003e',\r\n styles: ['h1 { font-weight: bold; }']\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Scope\r\n\r\nIn Angular, the scope of a variable determines where it can be accessed:\r\n\r\n- **Global Scope**: Accessible anywhere in the application.\r\n- **Local Scope**: Accessible only within a specific function or block.\r\n- **Component Scope**: Accessible within a component and its child components.\r\n\r\n### Global Scope\r\n\r\nAccessible from anywhere in the application; defined outside any function or block.\r\n\r\nExample :\r\n\r\n```typescript\r\n// Global Scope\r\nlet globalVariable = 'Global Variable';\r\n\r\nfunction testFunction() {\r\n console.log(globalVariable); // Output: Global Variable\r\n}\r\n\r\ntestFunction();\r\n```\r\n\r\nExample in Angular :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n// Global Scope\r\nlet globalVariable = 'Global Variable';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\n\r\nexport class AppComponent {\r\n title = globalVariable;\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--app.component.html--\u003e\r\n\u003ch1\u003e{{ title }}\u003c/h1\u003e\r\n```\r\n\r\n### Local Scope\r\n\r\nAccessible only within the function or block where defined.\r\n\r\nExample :\r\n\r\n```typescript\r\nfunction testFunction() {\r\n // Local Scope\r\n let localVariable = 'Local Variable';\r\n console.log(localVariable); // Output: Local Variable\r\n}\r\n\r\ntestFunction();\r\nconsole.log(localVariable); // Error: localVariable is not defined\r\n```\r\n\r\nExample in Angular :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\n\r\nexport class AppComponent {\r\n testFunction() {\r\n // Local Scope\r\n let localVariable = 'Local Variable';\r\n console.log(localVariable); // Output: Local Variable\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--app.component.html--\u003e\r\n\u003cbutton (click)=\"testFunction()\"\u003eTest Function\u003c/button\u003e\r\n```\r\n\r\n### Component Scope\r\n\r\nAccessible within the component and its children.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\n\r\nexport class AppComponent {\r\n // Component Scope\r\n title = 'app';\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--app.component.html--\u003e\r\n\u003ch1\u003e{{ title }}\u003c/h1\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## View Encapsulation\r\n\r\nControls how styles are applied to components. By default, Angular uses Emulated View Encapsulation, scoping styles to the component.\r\n\r\n### Emulated View Encapsulation\r\n\r\nDefault mode in Angular, emulating shadow DOM to scope styles to the component.\r\n\r\n```typescript\r\nimport { Component, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n encapsulation: ViewEncapsulation.Emulated\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-xfz4uk?file=src%2Fmain.ts)\r\n\r\n### Shadow DOM View Encapsulation\r\n\r\nUses native shadow DOM to encapsulate styles within the component, preventing them from affecting other components.\r\n\r\n```typescript\r\nimport { Component, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n encapsulation: ViewEncapsulation.ShadowDom\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-cc1rfn?file=src%2Fmain.ts)\r\n\r\n### None View Encapsulation\r\n\r\nDisables encapsulation; styles can affect other components.\r\n\r\n```typescript\r\nimport { Component, ViewEncapsulation } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n encapsulation: ViewEncapsulation.None\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-gzsxag?file=src%2Fmain.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Component Communication\r\n\r\nPassing data between Angular components using Input/Output decorators, EventEmitter, and services.\r\n\r\n### Parent to Child\r\n\r\n**Input Decorator** - The `@Input` decorator is used to pass data from a parent component to a child component. It allows the parent component to bind a property to the child component.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n templateUrl: './child.component.html',\r\n styleUrls: ['./child.component.css']\r\n})\r\n\r\nexport class ChildComponent {\r\n @Input() message: string;\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--child.component.html--\u003e\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-parent',\r\n templateUrl: './parent.component.html',\r\n styleUrls: ['./parent.component.css']\r\n})\r\n\r\nexport class ParentComponent {\r\n message = 'Hello from parent component';\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--parent.component.html--\u003e\r\n\u003capp-child [message]=\"message\"\u003e\u003c/app-child\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-qqjcgn?file=src%2Fmain.ts)\r\n\r\n### Child to Parent\r\n\r\n**Output Decorator** - The `@Output` decorator is used to pass data from a child component to a parent component. It allows the child component to emit events that the parent component can listen to.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component, Output, EventEmitter } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n templateUrl: './child.component.html',\r\n styleUrls: ['./child.component.css']\r\n})\r\n\r\nexport class ChildComponent {\r\n @Output() messageEvent = new EventEmitter\u003cstring\u003e();\r\n\r\n sendMessage() {\r\n this.messageEvent.emit('Hello from child component');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--child.component.html--\u003e\r\n\u003cbutton (click)=\"sendMessage()\"\u003eSend Message\u003c/button\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-parent',\r\n templateUrl: './parent.component.html',\r\n styleUrls: ['./parent.component.css']\r\n})\r\n\r\nexport class ParentComponent {\r\n message: string;\r\n\r\n receiveMessage($event) {\r\n this.message = $event;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--parent.component.html--\u003e\r\n\u003capp-child (messageEvent)=\"receiveMessage($event)\"\u003e\u003c/app-child\u003e\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-4qgrhm?file=src%2Fmain.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Siblings to Siblings Communication\r\n\r\n**Using Services** - Services are a way to share data and functionality between components in Angular. You can create a service that holds the data and methods that need to be shared between components.\r\n\r\nExample 1 :\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\n\r\nexport class DataService {\r\n message: string;\r\n\r\n setMessage(message: string) {\r\n this.message = message;\r\n }\r\n\r\n getMessage() {\r\n return this.message;\r\n }\r\n}\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'app-sibling1',\r\n templateUrl: './sibling1.component.html',\r\n styleUrls: ['./sibling1.component.css']\r\n})\r\n\r\nexport class Sibling1Component {\r\n message: string;\r\n\r\n constructor(private dataService: DataService) {}\r\n\r\n sendMessage() {\r\n this.dataService.setMessage('Hello from sibling1 component');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--sibling1.component.html--\u003e\r\n\u003cbutton (click)=\"sendMessage()\"\u003eSend Message\u003c/button\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'app-sibling2',\r\n templateUrl: './sibling2.component.html',\r\n styleUrls: ['./sibling2.component.css']\r\n})\r\n\r\nexport class Sibling2Component {\r\n message: string;\r\n\r\n constructor(private dataService: DataService) {}\r\n\r\n receiveMessage() {\r\n this.message = this.dataService.getMessage();\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--sibling2.component.html--\u003e\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n\u003cbutton (click)=\"receiveMessage()\"\u003eReceive Message\u003c/button\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-uvqypy?file=src%2Fmain.ts)\r\n\r\nExample 2 :\r\n\r\n**Using RxJS Subjects** - RxJS Subjects are a way to share data and events between components in Angular. You can create a Subject that emits events and subscribe to those events in the components.\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport { Subject } from 'rxjs';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\n\r\nexport class DataService {\r\n message = new Subject\u003cstring\u003e();\r\n\r\n setMessage(message: string) {\r\n this.message.next(message);\r\n }\r\n}\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'app-sibling1',\r\n templateUrl: './sibling1.component.html',\r\n styleUrls: ['./sibling1.component.css']\r\n})\r\n\r\nexport class Sibling1Component {\r\n message: string;\r\n\r\n constructor(private dataService: DataService) {}\r\n\r\n sendMessage() {\r\n this.dataService.setMessage('Hello from sibling1 component');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--sibling1.component.html--\u003e\r\n\u003cbutton (click)=\"sendMessage()\"\u003eSend Message\u003c/button\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'app-sibling2',\r\n templateUrl: './sibling2.component.html',\r\n styleUrls: ['./sibling2.component.css']\r\n})\r\n\r\nexport class Sibling2Component {\r\n message: string;\r\n\r\n constructor(private dataService: DataService) {}\r\n\r\n ngOnInit() {\r\n this.dataService.message.subscribe(message =\u003e {\r\n this.message = message;\r\n });\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--sibling2.component.html--\u003e\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n```\r\n\r\nExample 3 :\r\n\r\n**Using ViewChild and ViewChildren** - ViewChild and ViewChildren are a way to access child components in Angular. You can use ViewChild to access a single child component and ViewChildren to access multiple child components.\r\n\r\n```typescript\r\nimport { Component, ViewChild } from '@angular/core';\r\nimport { Sibling2Component } from './sibling2.component';\r\n\r\n@Component({\r\n selector: 'app-sibling1',\r\n templateUrl: './sibling1.component.html',\r\n styleUrls: ['./sibling1.component.css']\r\n})\r\n\r\nexport class Sibling1Component {\r\n @ViewChild(Sibling2Component) sibling2: Sibling2Component;\r\n\r\n sendMessage() {\r\n this.sibling2.message = 'Hello from sibling1 component';\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--sibling1.component.html--\u003e\r\n\u003cbutton (click)=\"sendMessage()\"\u003eSend Message\u003c/button\u003e\r\n\u003capp-sibling2\u003e\u003c/app-sibling2\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-sibling2',\r\n templateUrl: './sibling2.component.html',\r\n styleUrls: ['./sibling2.component.css']\r\n})\r\n\r\nexport class Sibling2Component {\r\n message: string;\r\n}\r\n```\r\n\r\n```html\r\n\u003c!--sibling2.component.html--\u003e\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-nezkvf?file=src%2Fmain.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Standalone Components\r\n\r\nA standalone component is a type of component which is not part of any Angular module. It provides a simplified way to build Angular applications by reducing the need for NgModules. Standalone components are self-contained and declare their own dependencies.\r\n\r\n### Creating a Standalone Component\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'app-standalone',\r\n standalone: true, // Mark as standalone\r\n imports: [CommonModule], // Import required dependencies\r\n template: `\r\n \u003ch1\u003eStandalone Component\u003c/h1\u003e\r\n \u003cp\u003eThis is a self-contained component\u003c/p\u003e\r\n `\r\n})\r\nexport class StandaloneComponent {\r\n // Component logic here\r\n}\r\n```\r\n\r\n### Key Features of Standalone Components\r\n\r\n- **Self-contained**: Declares its own dependencies through the imports array\r\n- **No NgModule required**: Can be used without declaring in a module\r\n- **Easier testing**: Simpler to test due to explicit dependencies\r\n- **Better tree-shaking**: Enables more efficient bundle optimization\r\n- **Simplified lazy-loading**: Can be lazy-loaded directly without module\r\n\r\n### Using Standalone Components\r\n\r\n```typescript\r\n// Importing in another standalone component\r\n@Component({\r\n selector: 'app-parent',\r\n standalone: true,\r\n imports: [StandaloneComponent],\r\n template: `\r\n \u003capp-standalone\u003e\u003c/app-standalone\u003e\r\n `\r\n})\r\nexport class ParentComponent {}\r\n\r\n// Bootstrapping a standalone component\r\nimport { bootstrapApplication } from '@angular/platform-browser';\r\n\r\nbootstrapApplication(AppComponent, {\r\n providers: [\r\n // Root providers here\r\n ]\r\n});\r\n```\r\n\r\n### Converting to Standalone\r\n\r\nTo convert an existing component to standalone:\r\n\r\n1. Add `standalone: true` to the component decorator\r\n2. Move dependencies from NgModule imports to component imports\r\n3. Remove component declaration from NgModule\r\n4. Import required dependencies directly in the component\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Data binding\r\n\r\nData binding is a core feature of Angular that allows you to bind data between the component's class and the HTML template. There are two types of data binding in Angular:\r\n\r\nThere are two types of data binding in Angular:\r\n\r\n- **One-way binding** - This allows for passing data from the component's class to the HTML template or vice-versa.\r\n\r\n- **Two-way binding** - This allows for binding a property of an HTML element to a property in the component's class and vice-versa.\r\n\r\n### One way binding\r\n\r\nOne-way binding allows for passing data from the component's class to the HTML template.\r\n\r\nThere are several ways to achieve one-way binding in Angular, including:\r\n\r\n1. From Component to View\r\n2. From View to Component\r\n\r\n**1. From Component to View** - This allows for passing data from the component's class to the HTML template.\r\n\r\nThere are several ways to achieve one-way binding from the component to the view in Angular, including:\r\n\r\n1. Interpolation\r\n2. Property binding\r\n3. Class binding\r\n4. Style binding\r\n5. Attribute binding\r\n\r\n**Interpolation** - This allows for embedding expressions in the HTML template. It is denoted by double curly braces ({{}}).\r\n\r\nExample :\r\n\r\n```html\r\n\u003ch1\u003e{{ firstText }} {{ lastText }}\u003c/h1\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n firstText = 'Interpolation';\r\n lastText = 'Example';\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-zu564w?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n**Property binding** - This allows for binding a property of an HTML element to a property in the component's class. It is denoted by square brackets ([]).\r\n\r\nExample :\r\n\r\n```html\r\n\u003ch1 [innerText]=\"title\"\u003e\u003c/h1\u003e\r\n\r\n\u003cbutton [disabled]=\"isDisabled\"\u003eI am disabled\u003c/button\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n title = 'Angular Property Binding Example';\r\n\r\n isDisabled = true;\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-vcpyoq?file=src/app/app.component.ts)\r\n\r\n**class binding** - This allows for binding a class of an HTML element to a property in the component's class. It is denoted by square brackets ([]).\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n isActive = false;\r\n\r\n toggleActive() {\r\n this.isActive = !this.isActive;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cdiv [class.active]=\"isActive\"\u003eThis div is active.\u003c/div\u003e\r\n\u003cbutton (click)=\"toggleActive()\"\u003eToggle Active\u003c/button\u003e\r\n```\r\n\r\n```css\r\n.active {\r\n background-color: yellow;\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-s1pkwg?file=src/app/app.component.ts)\r\n\r\n**style binding** - This allows for binding a style of an HTML element to a property in the component's class. It is denoted by square brackets ([]).\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n backgroundColor = 'red';\r\n textColor = 'white';\r\n}\r\n```\r\n\r\n```html\r\n\u003cdiv [style.background-color]=\"backgroundColor\"\u003e\r\n \u003ch1 [style.color]=\"textColor\"\u003eHello, world!\u003c/h1\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-w8nf7f?file=src/app/app.component.ts)\r\n\r\n**attribute binding** - This allows for binding an attribute of an HTML element to a property in the component's class. It is denoted by square brackets ([]).\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n imageUrl = 'https://example.com/image.jpg';\r\n imageAlt = 'Example image';\r\n isButtonDisabled = false;\r\n}\r\n```\r\n\r\n```html\r\n\u003cimg [attr.src]=\"imageUrl\" [attr.alt]=\"imageAlt\"\u003e\r\n\u003cbutton [attr.disabled]=\"isButtonDisabled\"\u003eClick me\u003c/button\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-bhqsgc?file=src/app/app.component.html)\r\n\r\n**b. From View to Component** - This allows for passing data from the HTML template to the component's class.\r\n\r\nThere are several ways to achieve one-way binding from the view to the component in Angular, including:\r\n\r\n1. Event binding\r\n2. ngModel\r\n\r\n**Event binding** - This allows for binding an event of an HTML element to a method in the component's class. It is denoted by parentheses (()).\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: [ './app.component.css' ]\r\n})\r\nexport class AppComponent {\r\n onClick() {\r\n console.log('Button was clicked');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003eEvent Binding Example\u003c/h1\u003e\r\n\u003cbutton (click)=\"onClick()\"\u003eClick me\u003c/button\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-kxuxsk?file=src/app/app.component.ts)\r\n\r\n**ngModel** - The `ngModel` directive is used to create two-way data binding between an input element and a property in the component's class. It is commonly used to bind form controls to properties in the component.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n name: string = '';\r\n}\r\n```\r\n\r\n```html\r\n\u003cinput [(ngModel)]=\"name\" placeholder=\"Enter your name\"\u003e\r\n\u003cp\u003eYour name is: {{name}}\u003c/p\u003e\r\n```\r\n\r\n**Remeber💡** :\r\n\r\nThe (click) calls the specified function when a user clicks on the given element (in your example, when a user clicks on a row).\r\n\r\nThe (change) event binds to HTML's onChange event. This event is fired for `\u003cinput\u003e`, `\u003cselect\u003e`, and `\u003ctextarea\u003e` elements when a change to the element's value is committed by the user.\r\n\r\nThe (change) event can also be specifically implemented by other Angular components. It is generally implemented on components where the contents of the component are changed by the user.\r\n\r\n[☝️Source of Explaination](https://stackoverflow.com/a/51127794/14292971)\r\n\r\n### Two ways binding\r\n\r\nTwo-way binding allows for binding a property of an HTML element to a property in the component's class and vice-versa. It is denoted by `[(ngModel)]`.\r\n\r\nThere are several ways to achieve two-way binding in Angular, including:\r\n\r\n1. ngModel\r\n2. ngModelChange\r\n3. change event\r\n\r\n**ngModel** - The `ngModel` directive is used to create two-way data binding between an input element and a property in the component's class. It is commonly used to bind form controls to properties in the component.\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n name: string = '';\r\n}\r\n```\r\n\r\n```html\r\n\u003cinput [(ngModel)]=\"name\" placeholder=\"Enter your name\"\u003e\r\n\u003cp\u003eYour name is: {{name}}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-wrru3d?file=src/app/app.component.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n**ngModelChange** - The `ngModelChange` event is emitted when the value of an input element bound to `ngModel` changes. It can be used to perform additional logic when the value changes.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n name: string = '';\r\n\r\n onNameChange(value: string) {\r\n console.log('Name changed to:', value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cinput [(ngModel)]=\"name\" (ngModelChange)=\"onNameChange($event)\" placeholder=\"Enter your name\"\u003e\r\n\u003cp\u003eYour name is: {{name}}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-s43hdu?file=src%2Fmain.ts)\r\n\r\n**change event** - The `change` event is emitted when the value of an input element changes. It can be used to perform additional logic when the value changes.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n name: string = '';\r\n\r\n onNameChange(value: string) {\r\n console.log('Name changed to:', value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cinput [(ngModel)]=\"name\" (change)=\"onNameChange($event.target.value)\" placeholder=\"Enter your name\"\u003e\r\n\u003cp\u003eYour name is: {{name}}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-s43hdu?file=src%2Fmain.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Directives\r\n\r\nDirectives add behaviour to an existing DOM element or an existing component instance.\r\n\r\n### Types of Directives\r\n\r\nThere are three types of directives in Angular:\r\n\r\n1. **Structural Directives** - Structural directives are used to add or remove elements from the DOM based on a condition. They are denoted by an asterisk (*) before the directive name.\r\n\r\n2. **Attribute Directives** - Attribute directives are used to change the appearance or behavior of an element. They are denoted by square brackets [] before the directive name.\r\n\r\n3. **Custom Directives** - Custom directives are user-defined directives that add custom behavior to an element. They can be used to encapsulate complex behavior and reuse it across multiple components.\r\n\r\n### Structural Directives\r\n\r\nThere are several built-in structural directives in Angular, including:\r\n\r\n1. NgIf\r\n2. NgFor\r\n3. NgSwitch\r\n\r\n**ngIf** - The `ngIf` directive is used to conditionally display elements based on the value of a given expression. It is commonly used to show or hide elements in the UI based on certain conditions.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n showElement = true;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engIf Example\u003c/h1\u003e\r\n\u003cdiv *ngIf=\"showElement\"\u003e\r\n This element will only be displayed if showElement is true.\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-bajfgs?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n**ngFor** - The `ngFor` directive is used to iterate over a list of items and create a template for each item. It is commonly used to display a list of items in the UI.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n items = ['Item 1', 'Item 2', 'Item 3'];\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engFor Example\u003c/h1\u003e\r\n\u003cul\u003e\r\n \u003cli *ngFor=\"let item of items\"\u003e{{ item }}\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-sn3tgd?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n**ngSwitch** - The `ngSwitch` directive is used to conditionally display elements based on the value of a given expression. It is similar to a switch statement in JavaScript.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n value = 1;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engSwitch Example\u003c/h1\u003e\r\n\u003cdiv [ngSwitch]=\"value\"\u003e\r\n \u003cdiv *ngSwitchCase=\"1\"\u003eCase 1\u003c/div\u003e\r\n \u003cdiv *ngSwitchCase=\"2\"\u003eCase 2\u003c/div\u003e\r\n \u003cdiv *ngSwitchCase=\"3\"\u003eCase 3\u003c/div\u003e\r\n \u003cdiv *ngSwitchDefault\u003eDefault case\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-xm8ztp?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Attribute Directives\r\n\r\nThere are several built-in attribute directives in Angular, including:\r\n\r\n1. NgClass\r\n2. NgStyle\r\n3. NgModel\r\n\r\n**ngClass** - The `ngClass` directive is used to conditionally apply CSS classes to an element based on the value of a given expression. It is commonly used to apply styles to elements based on certain conditions.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n isHighlighted = true;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engClass Example\u003c/h1\u003e\r\n\u003cdiv [ngClass]=\"{ highlighted: isHighlighted }\"\u003e\r\n This element will have the 'highlighted' class if isHighlighted is true.\r\n\u003c/div\u003e\r\n```\r\n\r\n```css\r\n.highlighted {\r\n background-color: yellow;\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-cn1fph?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n**ngStyle** - The `ngStyle` directive is used to conditionally apply inline styles to an element based on the value of a given expression. It is commonly used to apply dynamic styles to elements based on certain conditions.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n color = 'red';\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engStyle Example\u003c/h1\u003e\r\n\u003cdiv [ngStyle]=\"{ color: color }\"\u003e\r\n This element will have the color style set to the value of the color property.\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-zcgf1h?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n**ngModel** - The `ngModel` directive is used to create two-way data binding between an input element and a property in the component's class. It is commonly used to bind form controls to properties in the component.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n name: string;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engModel Example\u003c/h1\u003e\r\n\u003cform\u003e\r\n \u003clabel for=\"name\"\u003eName:\u003c/label\u003e\r\n \u003cinput type=\"text\" id=\"name\" [(ngModel)]=\"name\" name=\"name\" /\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-wrru3d?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Custom Directives\r\n\r\nCustom directives are user-defined directives that add custom behavior to an element. They can be used to encapsulate complex behavior and reuse it across multiple components.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Directive, ElementRef, HostListener, Input } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[appCustomDirective]',\r\n})\r\nexport class CustomDirectiveDirective {\r\n constructor(private el: ElementRef) {}\r\n\r\n @HostListener('mouseenter') onMouseEnter() {\r\n this.highlight('yellow');\r\n }\r\n\r\n @HostListener('mouseleave') onMouseLeave() {\r\n this.highlight(null);\r\n }\r\n\r\n private highlight(color: string) {\r\n this.el.nativeElement.style.backgroundColor = color;\r\n }\r\n}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { CustomDirectiveDirective } from './custom-directive.directive';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent, CustomDirectiveDirective],\r\n bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n```html\r\n\u003ch1\u003eCustom Directive Element\u003c/h1\u003e\r\n\u003cdiv appCustomDirective\u003e\r\n This element will have a yellow background when the mouse is over it.\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-xyv8qw?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Other directives\r\n\r\nThere are several other built-in directives in Angular, including:\r\n\r\n- **ngContainer**\r\n- **ngTemplate**\r\n- **ngContent**\r\n- **ngTemplateOutlet**\r\n\r\n**ngContainer** - The `ngContainer` directive is a simple container that doesn't generate any markup in the DOM. It's mainly used as a placeholder to group and structure content within Angular templates.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n condition = true;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engContainer Example\u003c/h1\u003e\r\n\u003cdiv *ngIf=\"condition\"\u003e\r\n \u003cng-container\u003e\r\n \u003cp\u003eContent to be conditionally rendered\u003c/p\u003e\r\n \u003cp\u003eMore content...\u003c/p\u003e\r\n \u003c/ng-container\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-zjr4xc?file=src%2Fmain.ts)\r\n\r\n**ngTemplate** - The `ngTemplate` directive is used to define a reusable template block that can be used later within the same component or shared across components using the ngTemplateOutlet directive.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n selectedTemplate: any;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engTemplate Example\u003c/h1\u003e\r\n\u003cng-template #myTemplate\u003e\r\n \u003cp\u003eThis is a template\u003c/p\u003e\r\n \u003cp\u003eIt can be reused in multiple places\u003c/p\u003e\r\n\u003c/ng-template\u003e\r\n\r\n\u003cdiv\u003e\r\n \u003cng-container *ngTemplateOutlet=\"selectedTemplate\"\u003e\u003c/ng-container\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cbutton (click)=\"selectedTemplate = myTemplate\"\u003eLoad Template\u003c/button\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-azqjxv?file=src%2Fmain.ts)\r\n\r\n**ngContent** - The `ngContent` directive is used for content projection or transclusion. It allows you to create reusable components with customizable content.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n templateUrl: './child.component.html',\r\n styleUrls: ['./child.component.css'],\r\n})\r\n\r\nexport class ChildComponent {}\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-parent',\r\n templateUrl: './parent.component.html',\r\n styleUrls: ['./parent.component.css'],\r\n})\r\n\r\nexport class ParentComponent {}\r\n```\r\n\r\n```html\r\n\u003c!-- Parent Component --\u003e\r\n\u003capp-child\u003e\r\n \u003cp\u003eContent projected into the child component\u003c/p\u003e\r\n\u003c/app-child\u003e\r\n```\r\n\r\n```html\r\n\u003c!-- Child Component Template --\u003e\r\n\u003cdiv\u003e\r\n \u003cng-content\u003e\u003c/ng-content\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-8ddr3h?file=src%2Fmain.ts)\r\n\r\n**ngTemplateOutlet** - The `ngTemplateOutlet` directive is used to render a template defined using ngTemplate. It allows you to dynamically render a template within a component's template.\r\n\r\nExample :\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n selectedTemplate: any;\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003engTemplateOutlet Example\u003c/h1\u003e\r\n\u003cng-container *ngTemplateOutlet=\"selectedTemplate\"\u003e\u003c/ng-container\u003e\r\n\r\n\u003cng-template #template1\u003e\r\n Template 1 content\r\n\u003c/ng-template\u003e\r\n\r\n\u003cng-template #template2\u003e\r\n Template 2 content\r\n\u003c/ng-template\u003e\r\n\r\n\u003cbutton (click)=\"selectedTemplate = template1\"\u003eLoad Template 1\u003c/button\u003e\r\n\u003cbutton (click)=\"selectedTemplate = template2\"\u003eLoad Template 2\u003c/button\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-yerwcu?file=src%2Fmain.ts)\r\n\r\n## New Control Flow\r\n\r\nConditionally display content with @if, @else-if and @else\r\n\r\n```html\r\n@if (a \u003e b) {\r\n \u003cp\u003e{{a}} is greater than {{b}}\u003c/p\u003e\r\n}\r\n```\r\n\r\n```html\r\n@if (a \u003e b) {\r\n {{a}} is greater than {{b}}\r\n} @else if (b \u003e a) {\r\n {{a}} is less than {{b}}\r\n} @else {\r\n {{a}} is equal to {{b}}\r\n}\r\n```\r\n\r\nRepeat content with the @for block\r\n\r\n```html\r\n@for (item of items; track item.id) {\r\n {{ item.name }}\r\n}\r\n```\r\n\r\nProviding a fallback for @for blocks with the @empty block\r\n\r\n```html\r\n@for (item of items; track item.name) {\r\n \u003cli\u003e {{ item.name }}\u003c/li\u003e\r\n} @empty {\r\n \u003cli aria-hidden=\"true\"\u003e There are no items. \u003c/li\u003e\r\n}\r\n```\r\n\r\nConditionally display content with the @switch block\r\n\r\n```html\r\n@switch (userPermissions) {\r\n @case ('admin') {\r\n \u003capp-admin-dashboard /\u003e\r\n }\r\n @case ('reviewer') {\r\n \u003capp-reviewer-dashboard /\u003e\r\n }\r\n @case ('editor') {\r\n \u003capp-editor-dashboard /\u003e\r\n }\r\n @default {\r\n \u003capp-viewer-dashboard /\u003e\r\n }\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Pipes\r\n\r\nA pipe takes in data as input and transforms it to a desired output.\r\n\r\nSyntax:\r\n\r\n```text\r\n{{ data | pipe }}\r\n```\r\n\r\n```text\r\nExpression | pipeOperator[:pipeArguments]\r\n\r\n# Expression: is the expression, which you want to transform\r\n# | : is the Pipe Character\r\n# pipeOperator : name of the Pipe\r\n# pipeArguments: arguments to the Pipe\r\n```\r\n\r\n### Built-in Pipes\r\n\r\nThere are several built-in pipes in Angular, including:\r\n\r\n- **Date Pipe**\r\n- **Uppercase Pipe**\r\n- **Lowercase Pipe**\r\n- **Currency Pipe**\r\n- **Percent Pipe**\r\n- **Slice Pipe**\r\n- **Decimal/number Pipe**\r\n- **JSON Pipe**\r\n- **Async Pipe**\r\n\r\n### Date Pipe\r\n\r\nThe `date` pipe is used to format a date value according to the locale rules specified in the application.\r\n\r\n```ts\r\nimport { DatePipe } from '@angular/common';\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n date = new Date();\r\n\r\n constructor(private datePipe: DatePipe) {}\r\n\r\n formatDate() {\r\n return this.datePipe.transform(this.date, 'shortDate');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003eDate Pipe Example\u003c/h1\u003e\r\n\u003cp\u003e{{ date | date: 'shortDate' }}\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { DatePipe } from '@angular/common';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n providers: [DatePipe],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-fobnad?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Uppercase Pipe\r\n\r\nThe `uppercase` pipe is used to transform a string to uppercase.\r\n\r\n```html\r\n\u003ch1\u003eUpper Case Pipe Example\u003c/h1\u003e\r\n\u003cp\u003e{{ name | uppercase }}\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n name = 'Manthan Ank';\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-hlmoxp?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Lowercase Pipe\r\n\r\nThe `lowercase` pipe is used to transform a string to lowercase.\r\n\r\n```html\r\n\u003cp\u003e{{ name | lowercase }}\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n name = 'Manthan Ank';\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-6gcdgx?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Currency Pipe\r\n\r\nThe `currency` pipe is used to format a number as currency using the locale rules specified in the application.\r\n\r\n```html\r\n\u003ch1\u003eCurrency Pipe Example\u003c/h1\u003e\r\n\u003cp\u003e{{ price | currency }}\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport { CurrencyPipe } from '@angular/common';\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n price = 100;\r\n\r\n constructor(private currencyPipe: CurrencyPipe) { }\r\n\r\n formatCurrency() {\r\n return this.currencyPipe.transform(this.price, 'USD', true);\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { CurrencyPipe } from '@angular/common';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n providers: [CurrencyPipe],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-3fhhzz?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Percent Pipe\r\n\r\nThe `percent` pipe is used to format a number as a percentage.\r\n\r\n```html\r\n\u003ch1\u003ePercent Pipe Example\u003c/h1\u003e\r\n\u003cp\u003e{{ percentage | percent }}\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport { PercentPipe } from '@angular/common';\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n percentage = 0.5;\r\n\r\n constructor(private percentPipe: PercentPipe) {}\r\n\r\n formatPercentage() {\r\n return this.percentPipe.transform(this.percentage, '2');\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { HelloComponent } from './hello.component';\r\nimport { PercentPipe } from '@angular/common';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n providers: [PercentPipe],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-tccybj?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Slice Pipe\r\n\r\nThe `slice` pipe is used to create a new array or string containing a subset of the elements of the input array or string.\r\n\r\n```typescript\r\n\u003cp\u003e{{ ['apple', 'banana', 'orange', 'mango'] | slice:1:3 }}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-q88gmm?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### Decimal/number Pipe\r\n\r\nThe `number` pipe is used to format a number as text. It can be used to format a number as a percentage, currency, or decimal number.\r\n\r\n```html\r\n\u003cp\u003e{{ 123456.78 | number:'3.2-3' }}\u003c/p\u003e\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-7cwk1u?file=src%2Fapp%2Fapp.component.ts)\r\n\r\n### JSON Pipe\r\n\r\nThe `json` pipe is used to transform a JavaScript object into a JSON string.\r\n\r\n```html\r\n\u003cp\u003e{{data | json}}\u003c/p\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n data = { name: 'Manthan Ank', age: 25 };\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-jgc252?file=src%2Fmain.ts)\r\n\r\n### Async Pipe\r\n\r\nThe `async` pipe is used to subscribe to an Observable or Promise and return the latest value it has emitted.\r\n\r\n```html\r\n\u003cp\u003e{{data$ | async}}\u003c/p\u003e\r\n```\r\n\r\n```typescript\r\n// DataService.service.ts\r\nimport { Injectable } from '@angular/core';\r\nimport { Observable, of } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class DataService {\r\n private data$: Observable\u003cstring\u003e;\r\n\r\n constructor() {\r\n // Simulating an asynchronous data source\r\n this.data$ = of('Hello, async pipe!').pipe(\r\n // Simulating delay\r\n delay(2000)\r\n );\r\n }\r\n\r\n getData(): Observable\u003cstring\u003e {\r\n return this.data$;\r\n }\r\n}\r\n```\r\n\r\n```typescript\r\n// ExampleComponent.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: '\u003cdiv\u003e{{ data$ | async }}\u003c/div\u003e',\r\n})\r\nexport class ExampleComponent {\r\n data$: Observable\u003cstring\u003e;\r\n\r\n constructor(private dataService: DataService) {\r\n this.data$ = this.dataService.getData();\r\n }\r\n}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-iatcbn?file=src%2Fmain.ts)\r\n\r\n### Impure Pipes\r\n\r\nBy default, Angular pipes are pure, meaning they are stateless and do not change unless the input value changes. However, you can create impure pipes by setting the pure property to false in the @Pipe decorator.\r\n\r\n```typescript\r\nimport { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'impurePipe',\r\n pure: false,\r\n})\r\n\r\nexport class ImpurePipe implements PipeTransform {\r\n transform(value: any): any {\r\n return value;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cp\u003e{{ data | impurePipe }}\u003c/p\u003e\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n data = 'Hello, world!';\r\n}\r\n```\r\n\r\n```typescript\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent, ImpurePipe],\r\n bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-xy3hhp?file=src%2Fmain.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Decorators\r\n\r\nDecorators are design patterns used to isolate the modification or decoration of a class without modifying the source code.\r\n\r\nThere are several built-in decorators in Angular, including:\r\n\r\n- **@Component**\r\n- **@Directive**\r\n- **@Injectable**\r\n- **@Pipe**\r\n- **@NgModule**\r\n- **@Input**\r\n- **@Output**\r\n- **@HostListener**\r\n- **@ContentChild**\r\n- **@ContentChildren**\r\n- **@ViewChild**\r\n- **@ViewChildren**\r\n\r\n### Component\r\n\r\nThe `@Component` decorator is used to define a new component in Angular.\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n title = 'My App';\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003e{{ title }}\u003c/h1\u003e\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n### Directive\r\n\r\nThe `@Directive` decorator is used to define a new directive in Angular.\r\n\r\n```ts\r\nimport { Directive, ElementRef, HostListener } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[appCustomDirective]',\r\n})\r\n\r\nexport class CustomDirective {\r\n constructor(private el: ElementRef) {}\r\n\r\n @HostListener('mouseenter') onMouseEnter() {\r\n this.highlight('yellow');\r\n }\r\n\r\n @HostListener('mouseleave') onMouseLeave() {\r\n this.highlight(null);\r\n }\r\n\r\n private highlight(color: string) {\r\n this.el.nativeElement.style.backgroundColor = color;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cdiv appCustomDirective\u003e\r\n This element will have a yellow background when the mouse is over it.\r\n\u003c/div\u003e\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { CustomDirective } from './custom.directive';\r\n\r\n@NgModule({\r\n declarations: [CustomDirective],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n### Injectable\r\n\r\nThe `@Injectable` decorator is used to define a new service in Angular.\r\n\r\n```ts\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable\r\nexport class DataService {\r\n getData() {\r\n return 'Hello, world!';\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n data: string;\r\n\r\n constructor(private dataService: DataService) {\r\n this.data = this.dataService.getData();\r\n }\r\n}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n declarations: [AppComponent],\r\n providers: [DataService],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n### Pipe\r\n\r\nThe `@Pipe` decorator is used to define a new pipe in Angular.\r\n\r\n```ts\r\nimport { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n name: 'customPipe',\r\n})\r\n\r\nexport class CustomPipe implements PipeTransform {\r\n transform(value: any, args?: any): any {\r\n return value;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003e{{ data | customPipe }}\u003c/h1\u003e\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { CustomPipe } from './custom.pipe';\r\n\r\n@NgModule({\r\n declarations: [CustomPipe],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n### NgModule\r\n\r\nThe `@NgModule` decorator is used to define a new module in Angular.\r\n\r\n```ts\r\nimport { NgModule } from '@angular/core';\r\n\r\n@NgModule({\r\n imports: [],\r\n declarations: [],\r\n providers: [],\r\n bootstrap: [],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n```typescript\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n### Input\r\n\r\nThe `@Input` decorator is used to pass data from a parent component to a child component.\r\n\r\n```ts\r\nimport { Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n templateUrl: './child.component.html',\r\n styleUrls: ['./child.component.css']\r\n})\r\nexport class ChildComponent implements OnInit {\r\n @Input() message: string;\r\n constructor() { }\r\n\r\n ngOnInit() {}\r\n\r\n}\r\n```\r\n\r\n```ts\r\nimport { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-parent',\r\n templateUrl: './parent.component.html',\r\n styleUrls: ['./parent.component.css'],\r\n})\r\nexport class ParentComponent implements OnInit {\r\n parentMessage = 'Hello from the parent component!';\r\n constructor() {}\r\n\r\n ngOnInit() {}\r\n}\r\n```\r\n\r\n```html\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n```\r\n\r\n```html\r\n\u003capp-child [message]=\"parentMessage\"\u003e\u003c/app-child\u003e\r\n```\r\n\r\n```html\r\n\u003ch1\u003e@Input Example\u003c/h1\u003e\r\n\u003capp-parent\u003e\u003c/app-parent\u003e\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { RouterModule } from '@angular/router';\r\nimport { ChildComponent } from './child/child.component';\r\nimport { ParentComponent } from './parent/parent.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule, RouterModule],\r\n declarations: [AppComponent, ChildComponent, ParentComponent],\r\n bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n### Output\r\n\r\nThe `@Output` decorator is used to pass data from a child component to a parent component.\r\n\r\n```ts\r\nimport { Component, EventEmitter, OnInit, Output } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-child',\r\n templateUrl: './child.component.html',\r\n styleUrls: ['./child.component.css'],\r\n})\r\nexport class ChildComponent implements OnInit {\r\n @Output() messageEvent = new EventEmitter\u003cstring\u003e();\r\n\r\n constructor() {}\r\n\r\n ngOnInit() {}\r\n\r\n sendMessage() {\r\n this.messageEvent.emit('Hello from the child component!');\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-parent',\r\n templateUrl: './parent.component.html',\r\n styleUrls: ['./parent.component.css'],\r\n})\r\nexport class ParentComponent implements OnInit {\r\n constructor() {}\r\n\r\n ngOnInit() {}\r\n\r\n handleMessage(message: string) {\r\n console.log(message);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cbutton (click)=\"sendMessage()\"\u003eSend message\u003c/button\u003e\r\n```\r\n\r\n```html\r\n\u003capp-child (messageEvent)=\"handleMessage($event)\"\u003e\u003c/app-child\u003e\r\n```\r\n\r\n```html\r\n\u003ch1\u003e@Output Decorator Example\u003c/h1\u003e\r\n\u003capp-parent\u003e\u003c/app-parent\u003e\r\n```\r\n\r\n### HostListener\r\n\r\nThe `@HostListener` decorator is used to listen for events on the host element of a directive or component.\r\n\r\n```html\r\n\u003ch1\u003e@HostListener Decorator Example\u003c/h1\u003e\r\n\u003cp\u003eClick the host element to trigger the 'click' event.\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport { Component, HostListener } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n @HostListener('click')\r\n onClick() {\r\n console.log('The host element was clicked!');\r\n }\r\n}\r\n```\r\n\r\n### contentChild \u0026 contentChildren\r\n\r\nThe `@ContentChild` and `@ContentChildren` decorators are used to query for content children in the component's view.\r\n\r\n```ts\r\nimport {\r\n Component,\r\n ContentChild,\r\n ContentChildren,\r\n ElementRef,\r\n OnInit,\r\n QueryList,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-parent',\r\n templateUrl: './parent.component.html',\r\n styleUrls: ['./parent.component.css'],\r\n})\r\nexport class ParentComponent implements OnInit {\r\n @ContentChild('childButton1', { static: true }) childButton1: ElementRef;\r\n @ContentChildren('childButton2') childButtons2: QueryList\u003cElementRef\u003e;\r\n\r\n ngAfterContentInit() {\r\n console.log(this.childButton1.nativeElement.textContent);\r\n this.childButtons2.forEach((button) =\u003e {\r\n console.log(button.nativeElement.textContent);\r\n });\r\n }\r\n\r\n constructor() {}\r\n\r\n ngOnInit() {}\r\n}\r\n```\r\n\r\n```html\r\n\u003cng-content\u003e\u003c/ng-content\u003e\r\n```\r\n\r\n```html\r\n\u003ch1\u003e@ContentChild Decorator Example\u003c/h1\u003e\r\n\u003capp-parent\u003e\u003c/app-parent\u003e\r\n```\r\n\r\n### viewChild \u0026 viewChildren\r\n\r\nThe `@ViewChild` and `@ViewChildren` decorators are used to query for view children in the component's view.\r\n\r\n```ts\r\nimport { Component, ElementRef, QueryList, ViewChild, ViewChildren } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: [ './app.component.css' ]\r\n})\r\nexport class AppComponent {\r\n @ViewChild('childButton1', { static: true }) childButton1: ElementRef;\r\n @ViewChildren('childButton2') childButtons2: QueryList\u003cElementRef\u003e;\r\n\r\n ngAfterViewInit() {\r\n console.log(this.childButton1.nativeElement.textContent);\r\n this.childButtons2.forEach(button =\u003e {\r\n console.log(button.nativeElement.textContent);\r\n });\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003e@viewChild \u0026 @viewChildren Example\u003c/h1\u003e\r\n\u003cbutton #childButton1\u003eButton 1\u003c/button\u003e\r\n\u003cbutton #childButton2\u003eButton 2\u003c/button\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Life Cycle Hooks\r\n\r\nAngular provides a set of lifecycle hooks that give you visibility into key moments in the component's lifecycle.\r\n\r\nThere are several lifecycle hooks in Angular, including:\r\n\r\n- **ngOnChanges**\r\n- **ngOnInit**\r\n- **ngDoCheck**\r\n- **ngAfterContentInit**\r\n- **ngAfterContentChecked**\r\n- **ngAfterViewInit**\r\n- **ngAfterViewChecked**\r\n- **ngOnDestroy**\r\n\r\n### OnChanges\r\n\r\nIt is called when the data-bound properties of a directive/component are changed. It is called before ngOnInit and whenever one or more data-bound input properties change.\r\n\r\n```html\r\n\u003cform\u003e\r\n \u003cinput [(ngModel)]=\"message\" name=\"message\" /\u003e\r\n \u003cbutton type=\"submit\" (click)=\"onSubmit()\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n\u003cp\u003e{{ message }}\u003c/p\u003e\r\n```\r\n\r\n```ts\r\nimport {\r\n Component,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-test',\r\n templateUrl: './test.component.html',\r\n styleUrls: ['./test.component.css'],\r\n})\r\nexport class TestComponent implements OnChanges {\r\n @Input() message: string;\r\n prevMessage: string;\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (changes.message) {\r\n console.log(\r\n `message changed from ${changes.message.previousValue} to ${changes.message.currentValue}`\r\n );\r\n }\r\n }\r\n\r\n onSubmit() {\r\n this.prevMessage = this.message;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003capp-test [message]=\"'Hello World'\"\u003e\u003c/app-test\u003e\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-ivy-19r5mc?file=src/app/test/test.component.ts)\r\n\r\n### OnInit\r\n\r\nIt is called after Angular has initialized all data-bound properties of a directive/component. It is called only once after the first ngOnChanges.\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n constructor() {}\r\n\r\n ngOnInit() {\r\n console.log('logged from ngOnInit');\r\n }\r\n}\r\n```\r\n\r\n[Stackblits Link](https://stackblitz.com/edit/angular-ivy-hkmssz?file=src/app/app.component.html)\r\n\r\n### DoCheck\r\n\r\nIt is called during every change detection run, and it is used to detect and act upon changes that Angular doesn't catch on its own.\r\n\r\n```ts\r\nimport { Component, DoCheck } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements DoCheck {\r\n ngDoCheck() {\r\n console.log('ngDoCheck Called');\r\n }\r\n}\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-ivy-f5msas?file=src/app/app.component.ts)\r\n\r\n### AfterViewInit\r\n\r\nIt is called after Angular has fully initialized a component's view. It is the perfect place to put any initialization logic that depends on the view.\r\n\r\n```ts\r\nimport { AfterViewInit, Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements AfterViewInit{\r\n \r\n ngAfterViewInit(){\r\n console.log(\"after view init\")\r\n }\r\n clickMe(){\r\n console.log(\"link clicked\")\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ca (click)=\"clickMe()\"\u003eClick me\u003c/a\u003e\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-wscf59?file=src/main.ts)\r\n\r\n### AfterViewChecked\r\n\r\nIt is called after Angular has checked the component's view and child views. It is called after ngAfterViewInit and every subsequent ngAfterContentChecked.\r\n\r\n```ts\r\nimport { AfterViewChecked, Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements AfterViewChecked {\r\n ngAfterViewChecked(){\r\n console.log(\"after view checked\")\r\n }\r\n clickMe(){\r\n console.log(\"link clicked\")\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ca (click)=\"clickMe()\"\u003eClick me\u003c/a\u003e\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-wnwfnv?file=src/main.ts)\r\n\r\n### AfterContentInit\r\n\r\nIt is called after Angular has fully initialized the content of a directive. It is the perfect place to put any initialization logic that depends on the content.\r\n\r\n```ts\r\nimport { AfterContentInit, Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements AfterContentInit {\r\n ngAfterContentInit() {\r\n console.log('after content init');\r\n }\r\n clickMe() {\r\n console.log('clicked');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ca (click)=\"clickMe()\"\u003eClick me\u003c/a\u003e\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-qhy7cw?file=src/main.ts)\r\n\r\n### AfterContentChecked\r\n\r\nIt is called after the default change detector has completed checking all content of a directive. It is called after ngAfterContentInit and every subsequent ngAfterContentChecked.\r\n\r\n```ts\r\nimport { AfterContentInit, Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements AfterContentInit {\r\n ngAfterContentChecked() {\r\n console.log('after content init');\r\n }\r\n clickMe() {\r\n console.log('clicked');\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ca (click)=\"clickMe()\"\u003eClick me\u003c/a\u003e\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-ryx2uh?file=src/main.ts)\r\n\r\n### OnDestroy\r\n\r\nIt is called just before Angular destroys the directive/component. It is used to cleanup any resources or subscriptions that the directive/component has created.\r\n\r\n```ts\r\nimport { Component, OnDestroy, OnInit } from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { of } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent implements OnInit, OnDestroy {\r\n private subscription: Subscription;\r\n\r\n ngOnInit() {\r\n const someObservable = of(1, 2, 3);\r\n this.subscription = someObservable.subscribe((data) =\u003e {\r\n console.log(data);\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n this.subscription.unsubscribe();\r\n }\r\n}\r\n```\r\n\r\n[Stackblitz Link](https://stackblitz.com/edit/angular-ivy-urqida?file=src/app/app.module.ts)\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Forms\r\n\r\nAngular provides two types of forms:\r\n\r\n- **Template-driven forms**\r\n- **Reactive forms**\r\n\r\n### Template-driven Forms\r\n\r\nTemplate-driven forms are created using directives in the template. Angular automatically tracks the value and validity of the form controls.\r\n\r\n```html\r\n\u003cform #myForm=\"ngForm\" (ngSubmit)=\"onSubmit(myForm)\"\u003e\r\n \u003cinput type=\"text\" name=\"name\" ngModel required /\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\nexport class AppComponent {\r\n onSubmit(form: NgForm) {\r\n console.log(form.value);\r\n }\r\n}\r\n```\r\n\r\n### Reactive Forms\r\n\r\nReactive forms are created programmatically using form controls and form groups. They provide more control and flexibility compared to template-driven forms.\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: ['', Validators.required],\r\n email: ['', Validators.email],\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cinput type=\"email\" formControlName=\"email\" /\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\nSet Value in Template Driven forms in Angular\r\n\r\n```html\r\n\u003cform #myForm=\"ngForm\" (ngSubmit)=\"onSubmit(myForm)\"\u003e\r\n \u003cinput type=\"text\" name=\"name\" ngModel required /\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n onSubmit(form: NgForm) {\r\n form.setValue({ name: 'John' });\r\n }\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\nFormBuilder in Reactive Forms\r\n \r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: ['', Validators.required],\r\n email: ['', Validators.email],\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\nSetValue \u0026 PatchValue in Angular\r\n \r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n email: '',\r\n });\r\n\r\n this.form.setValue({\r\n name: 'John',\r\n email: 'john.doe@gmail.com',\r\n });\r\n\r\n this.form.patchValue({\r\n name: 'Jane',\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\nStatusChanges in Angular Forms\r\n \r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n email: '',\r\n });\r\n\r\n this.form.statusChanges.subscribe((status) =\u003e {\r\n console.log(status);\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\nValueChanges in Angular Forms\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n email: '',\r\n });\r\n\r\n this.form.valueChanges.subscribe((value) =\u003e {\r\n console.log(value);\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\nFormControl\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormControl } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n name = new FormControl('');\r\n\r\n onSubmit() {\r\n console.log(this.name.value);\r\n }\r\n}\r\n```\r\n\r\nFormGroup\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n email: '',\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\nFormArray Example\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup, FormArray } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n emails: this.fb.array([]),\r\n });\r\n }\r\n\r\n get emails() {\r\n return this.form.get('emails') as FormArray;\r\n }\r\n\r\n addEmail() {\r\n this.emails.push(this.fb.control(''));\r\n }\r\n\r\n removeEmail(index: number) {\r\n this.emails.removeAt(index);\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cdiv formArrayName=\"emails\"\u003e\r\n \u003cdiv *ngFor=\"let email of emails.controls; let i = index\"\u003e\r\n \u003cinput type=\"email\" [formControlName]=\"i\" /\u003e\r\n \u003cbutton type=\"button\" (click)=\"removeEmail(i)\"\u003eRemove\u003c/button\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n \u003cbutton type=\"button\" (click)=\"addEmail()\"\u003eAdd Email\u003c/button\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nBuild Dynamic or Nested Forms using FormArray\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup, FormArray } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n addresses: this.fb.array([]),\r\n });\r\n }\r\n\r\n get addresses() {\r\n return this.form.get('addresses') as FormArray;\r\n }\r\n\r\n addAddress() {\r\n this.addresses.push(\r\n this.fb.group({\r\n street: '',\r\n city: '',\r\n state: '',\r\n zip: '',\r\n })\r\n );\r\n }\r\n\r\n removeAddress(index: number) {\r\n this.addresses.removeAt(index);\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cdiv formArrayName=\"addresses\"\u003e\r\n \u003cdiv *ngFor=\"let address of addresses.controls; let i = index\"\u003e\r\n \u003cdiv [formGroupName]=\"i\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"street\" /\u003e\r\n \u003cinput type=\"text\" formControlName=\"city\" /\u003e\r\n \u003cinput type=\"text\" formControlName=\"state\" /\u003e\r\n \u003cinput type=\"text\" formControlName=\"zip\" /\u003e\r\n \u003cbutton type=\"button\" (click)=\"removeAddress(i)\"\u003eRemove\u003c/button\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n \u003cbutton type=\"button\" (click)=\"addAddress()\"\u003eAdd Address\u003c/button\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nSetValue \u0026 PatchValue in FormArray\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup, FormArray } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n addresses: this.fb.array([]),\r\n });\r\n\r\n this.form.setValue({\r\n name: 'John',\r\n addresses: [\r\n { street: '123 Main St', city: 'Anytown', state: 'CA', zip: '12345' },\r\n { street: '456 Elm St', city: 'Othertown', state: 'NY', zip: '67890' },\r\n ],\r\n });\r\n\r\n this.form.patchValue({\r\n name: 'Jane',\r\n });\r\n }\r\n\r\n get addresses() {\r\n return this.form.get('addresses') as FormArray;\r\n }\r\n\r\n addAddress() {\r\n this.addresses.push(\r\n this.fb.group({\r\n street: '',\r\n city: '',\r\n state: '',\r\n zip: '',\r\n })\r\n );\r\n }\r\n\r\n removeAddress(index: number) {\r\n this.addresses.removeAt(index);\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cdiv formArrayName=\"addresses\"\u003e\r\n \u003cdiv *ngFor=\"let address of addresses.controls; let i = index\"\u003e\r\n \u003cdiv [formGroupName]=\"i\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"street\" /\u003e\r\n \u003cinput type=\"text\" formControlName=\"city\" /\u003e\r\n \u003cinput type=\"text\" formControlName=\"state\" /\u003e\r\n \u003cinput type=\"text\" formControlName=\"zip\" /\u003e\r\n \u003cbutton type=\"button\" (click)=\"removeAddress(i)\"\u003eRemove\u003c/button\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n \u003c/div\u003e\r\n \u003cbutton type=\"button\" (click)=\"addAddress()\"\u003eAdd Address\u003c/button\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nSelect Options Dropdown\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n gender: '',\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cselect formControlName=\"gender\"\u003e\r\n \u003coption value=\"male\"\u003eMale\u003c/option\u003e\r\n \u003coption value=\"female\"\u003eFemale\u003c/option\u003e\r\n \u003c/select\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nTyped Forms in Angular\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\ninterface User {\r\n name: string;\r\n email: string;\r\n}\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group\u003cUser\u003e({\r\n name: '',\r\n email: '',\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cinput type=\"email\" formControlName=\"email\" /\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nFormArray in Angular\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { FormBuilder, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n form: FormGroup;\r\n\r\n constructor(private fb: FormBuilder) {\r\n this.form = this.fb.group({\r\n name: '',\r\n email: '',\r\n });\r\n }\r\n\r\n onSubmit() {\r\n console.log(this.form.value);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cform [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\"\u003e\r\n \u003cinput type=\"text\" formControlName=\"name\" /\u003e\r\n \u003cinput type=\"email\" formControlName=\"email\" /\u003e\r\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n## Services\r\n\r\nServices are used to encapsulate reusable functionality that can be shared across components. They are used to fetch data from a server, perform calculations, or interact with external services.\r\n\r\n```ts\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable\r\nexport class DataService {\r\n getData() {\r\n return 'Data from the service';\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n data: string;\r\n\r\n constructor(private dataService: DataService) {\r\n this.data = this.dataService.getData();\r\n }\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Injectable Decorator\r\n\r\nThe `@Injectable` decorator is used to define a service class that can be injected into other components or services.\r\n\r\n```ts\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable\r\nexport class DataService {\r\n getData() {\r\n return 'Data from the service';\r\n }\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Dependency Injection\r\n\r\nDependency injection is a design pattern used to create objects and manage their dependencies. It allows you to inject dependencies into a class rather than creating them within the class.\r\n\r\n```ts\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable\r\nexport class DataService {\r\n getData() {\r\n return 'Data from the service';\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n data: string;\r\n\r\n constructor(private dataService: DataService) {\r\n this.data = this.dataService.getData();\r\n }\r\n}\r\n```\r\n\r\nUsing `@inject` decorator is an alternative way to inject dependencies into a class.\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DataService } from './data.service';\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n})\r\n\r\nexport class AppComponent {\r\n data: string;\r\n private dataService = inject(DataService);\r\n\r\n constructor() {\r\n this.data = this.dataService.getData();\r\n }\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Providers\r\n\r\nProviders are used to define dependencies that are injected into components, directives, pipes, and services. They are defined in the `@NgModule` decorator of the root module or feature modules.\r\n\r\n```ts\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { DataService } from './data.service';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n providers: [DataService],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Routing\r\n\r\nRouting is used to navigate between different components in an Angular application. It allows users to move between different parts of the application by changing the URL in the browser.\r\n\r\n```ts\r\nimport { NgModule } from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\n\r\nconst routes: Routes = [];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule],\r\n})\r\n\r\nexport class AppRoutingModule {}\r\n```\r\n\r\n```typescript\r\nimport { Routes } from '@angular/router';\r\n\r\nexport const routes: Routes = [];\r\n```\r\n\r\n```typescript\r\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\r\nimport { provideRouter } from '@angular/router';\r\n\r\nimport { routes } from './app.routes';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideZoneChangeDetection({ eventCoalescing: true }),\r\n provideRouter(routes),\r\n ],\r\n};\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router Outlet\r\n\r\nThe `router-outlet` directive is used to render the component associated with the current route.\r\n\r\n```html\r\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router Link\r\n\r\nThe `routerLink` directive is used to navigate to a different route when the element is clicked.\r\n\r\n```html\r\n\u003ca [routerLink]=\"['/home']\"\u003eHome\u003c/a\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router Link Active\r\n\r\nThe `routerLinkActive` directive is used to add a CSS class to an element when the associated route is active.\r\n\r\n```html\r\n\u003ca routerLink=\"/home\" routerLinkActive=\"active\"\u003eHome\u003c/a\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router Link Active Options\r\n\r\nThe `routerLinkActiveOptions` directive is used to configure the behavior of the `routerLinkActive` directive.\r\n\r\n```html\r\n\u003ca routerLink=\"/home\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\"\u003eHome\u003c/a\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router State\r\n\r\nThe `RouterState` class is used to access the current state of the router.\r\n\r\n```ts\r\nimport { Router } from '@angular/router';\r\n\r\nconstructor(private router: Router) {\r\n const state = this.router.routerState;\r\n console.log(state);\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router Events\r\n\r\nThe `RouterEvents` class is used to listen for router events such as navigation start, navigation end, and navigation error.\r\n\r\n```ts\r\nimport { Router, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';\r\n\r\nconstructor(private router: Router) {\r\n router.events.subscribe((event) =\u003e {\r\n if (event instanceof NavigationStart) {\r\n console.log('Navigation started');\r\n }\r\n if (event instanceof NavigationEnd) {\r\n console.log('Navigation ended');\r\n }\r\n if (event instanceof NavigationError) {\r\n console.log('Navigation error');\r\n }\r\n });\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router Guards\r\n\r\nRouter guards are used to control navigation and access to routes in an Angular application. They can be used to prevent unauthorized access to certain routes, redirect users to a login page, or perform other actions before navigating to a route.\r\n\r\n```ts\r\nimport { Injectable } from '@angular/core';\r\nimport { CanActivate, Router } from '@angular/router';\r\n\r\n@Injectable()\r\nexport class AuthGuard implements CanActivate {\r\n constructor(private router: Router) {}\r\n\r\n canActivate() {\r\n if (localStorage.getItem('token')) {\r\n return true;\r\n } else {\r\n this.router.navigate(['/login']);\r\n return false;\r\n }\r\n }\r\n}\r\n```\r\n\r\n```ts\r\nimport { NgModule } from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\nimport { AuthGuard } from './auth.guard';\r\n\r\nconst routes: Routes = [];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule],\r\n providers: [AuthGuard],\r\n})\r\n\r\nexport class AppRoutingModule {}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## HTTP Client Module\r\n\r\nThe `HttpClientModule` is used to make HTTP requests to a server in an Angular application. It provides services for making GET, POST, PUT, DELETE, and other types of requests.\r\n\r\n```ts\r\nimport { HttpClientModule } from '@angular/common/http';\r\n\r\n@NgModule({\r\n imports: [HttpClientModule],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\nIn the angular v17 and above, the `HttpClientModule` has been deprecated. Instead, you can use the `provideHttpClient` function to provide the `HttpClient` service in your application. Here is an example of how to use the `provideHttpClient` function to provide the `HttpClient` service in your application:\r\n\r\n```ts\r\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\r\nimport { provideRouter } from '@angular/router';\r\n\r\nimport { routes } from './app.routes';\r\nimport { provideHttpClient } from '@angular/common/http';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideZoneChangeDetection({ eventCoalescing: true }),\r\n provideRouter(routes),\r\n provideHttpClient(),\r\n ],\r\n};\r\n```\r\n\r\n## HTTP Client\r\n\r\nThe `HttpClient` service is used to make HTTP requests to a server. It provides methods for making GET, POST, PUT, DELETE, and other types of requests.\r\n\r\n```ts\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\nconstructor(private http: HttpClient) {}\r\n\r\ngetData() {\r\n return this.http.get('https://api.example.com/data');\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Destroy Ref\r\n\r\nThe DestroyRef provider is a utility that allows Angular components to register cleanup callbacks that are executed when the component is destroyed. This is useful for cleaning up resources, such as subscriptions, timers, or other resources that need to be released when the component is no longer in use.\r\n\r\n```typescript\r\nimport { Component, OnInit, OnDestroy } from '@angular/core';\r\nimport { DestroyRef } from '@angular/core/testing';\r\n\r\n@Component({\r\n selector: 'my-component',\r\n templateUrl: './my-component.component.html',\r\n styleUrls: ['./my-component.component.css']\r\n})\r\nexport class MyComponent implements OnInit, OnDestroy {\r\n\r\n constructor(private destroyRef: DestroyRef) {}\r\n\r\n ngOnInit() {\r\n }\r\n\r\n ngOnDestroy() {\r\n // Register a destroy callback with the DestroyRef provider.\r\n this.destroyRef.register(() =\u003e {\r\n // Do any cleanup tasks here.\r\n });\r\n }\r\n\r\n}\r\n```\r\n\r\n## HTTP\r\n\r\nImport HttpClient Module in Root Module -\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { HttpClientModule } from '@angular/common/http';\r\n \r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n HttpClientModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\nImport Required Module in Component/Service -\r\n\r\n```typescript\r\nimport { HttpClient } from '@angular/common/http';\r\n```\r\n\r\nInject HttpClient service -\r\n\r\n```typescript\r\nconstructor(public http: HttpClient) {\r\n}\r\n```\r\n\r\n### HTTP GET\r\n\r\n```typescript\r\ngetData(){\r\n return this.http.get('url');\r\n}\r\n```\r\n\r\n### HTTP POST\r\n\r\n```typescript\r\nsendData(data: any){\r\n return this.http.post('url', data);\r\n}\r\n```\r\n\r\n### HTTP PUT\r\n\r\n```typescript\r\nupdateData(data: any){\r\n return this.http.put('url', data);\r\n}\r\n```\r\n\r\n### HTTP PATCH\r\n\r\n```typescript\r\nupdateData(data: any){\r\n return this.http.patch('url', data);\r\n}\r\n```\r\n\r\n### HTTP DELETE\r\n\r\n```typescript\r\ndeleteData(id: string){\r\n return this.http.delete(`url/${id}`);\r\n}\r\n```\r\n\r\n### HTTP Interceptor\r\n\r\nHttp Interceptors are a powerful feature provided by the `@angular/common/http` module. They allow you to intercept and modify HTTP requests and responses in your Angular application. With interceptors, you can perform various tasks such as authentication, logging, error handling, and more. Interceptors provide a way to add global behavior to your HTTP requests and responses, making it easier to implement common functionalities across your application.\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class ErrorInterceptor implements HttpInterceptor {\r\n intercept(req: HttpRequest\u003cany\u003e, next: HttpHandler): Observable\u003cHttpEvent\u003cany\u003e\u003e {\r\n console.log('Request started');\r\n return next.handle(req).pipe(\r\n catchError((error) =\u003e {\r\n console.error('Request failed', error);\r\n return throwError(error);\r\n })\r\n );\r\n }\r\n}\r\n```\r\n\r\nIn angular v17, the `HttpInterceptor` interface has been deprecated in favor of the `HttpInterceptorFn` type. The `HttpInterceptorFn` type is a function that takes a `HttpRequest` and a `HttpHandler` and returns an `Observable\u003cHttpEvent\u003e`. Here is an example of how to create an interceptor using the `HttpInterceptorFn` type:\r\n\r\n```typescript\r\nimport { HttpInterceptorFn } from '@angular/common/http';\r\nimport { catchError } from 'rxjs/operators';\r\nimport { throwError } from 'rxjs';\r\n\r\nexport const ErrorInterceptor: HttpInterceptorFn = (req, next) =\u003e {\r\n console.log('Request started');\r\n return next.handle(req).pipe(\r\n catchError((error) =\u003e {\r\n console.error('Request failed', error);\r\n return throwError(error);\r\n })\r\n );\r\n};\r\n```\r\n\r\nThere are two ways to implement interceptors in Angular:\r\n\r\n1. Functional Interceptors (Modern Approach)\r\nFor Angular v17+, use the `HttpInterceptorFn` type:\r\n\r\n ```typescript\r\n import { HttpInterceptorFn } from '@angular/common/http';\r\n\r\n export const loggingInterceptor: HttpInterceptorFn = (req, next) =\u003e {\r\n console.log('Request URL:', req.url);\r\n return next.handle(req);\r\n };\r\n ```\r\n\r\n Configure in your app config:\r\n\r\n ```typescript\r\n export const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideHttpClient(\r\n withInterceptors([loggingInterceptor])\r\n )\r\n ]\r\n };\r\n ```\r\n\r\n2. DI-based Interceptors (Traditional Approach)\r\nCreate an injectable class implementing `HttpInterceptor`:\r\n\r\n ```typescript\r\n @Injectable()\r\n export class LoggingInterceptor implements HttpInterceptor {\r\n intercept(req: HttpRequest\u003cany\u003e, handler: HttpHandler): Observable\u003cHttpEvent\u003cany\u003e\u003e {\r\n console.log('Request URL:', req.url);\r\n return handler.handle(req);\r\n }\r\n }\r\n ```\r\n\r\n Configure in your app module:\r\n\r\n ```typescript\r\n bootstrapApplication(AppComponent, {\r\n providers: [\r\n provideHttpClient(\r\n withInterceptorsFromDi(), // Enable DI-based interceptors\r\n ),\r\n {\r\n provide: HTTP_INTERCEPTORS,\r\n useClass: LoggingInterceptor,\r\n multi: true\r\n }\r\n ]\r\n });\r\n ```\r\n\r\n**Note**: DI-based interceptors run in provider registration order, which can be unpredictable in complex applications with hierarchical DI configurations.\r\n\r\n### Using Observable\r\n\r\n```typescript\r\nimport { Observable } from 'rxjs';\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\n\r\nexport class MyService {\r\n constructor(private http: HttpClient) {}\r\n\r\n getData(): Observable\u003cany\u003e {\r\n return this.http.get\u003cany\u003e('utl');\r\n }\r\n\r\n sendData(data: any): Observable\u003cany\u003e {\r\n return this.http.post\u003cany\u003e('utl', data);\r\n }\r\n\r\n updateData(data: any): Observable\u003cany\u003e {\r\n return this.http.put\u003cany\u003e('utl', data);\r\n }\r\n\r\n updateData(data: any): Observable\u003cany\u003e {\r\n return this.http.patch\u003cany\u003e('utl', data);\r\n }\r\n\r\n deleteData(id: string): Observable\u003cany\u003e {\r\n return this.http.delete\u003cany\u003e(`utl/${id}`);\r\n }\r\n}\r\n```\r\n\r\nOptions—Headers/Params\r\n\r\n```typescript\r\nimport { HttpHeaders, HttpParams } from '@angular/common/http';\r\n\r\nconst headers = new HttpHeaders({\r\n 'Content-Type': 'application\r\n 'Authorization': 'Bearer my-token'\r\n});\r\n\r\nconst params = new HttpParams()\r\n .set('param1', 'value1')\r\n .set('param2', 'value2');\r\n\r\nthis.http.get('url', { headers, params });\r\n\r\nthis.http.post('url', data, { headers, params });\r\n\r\nthis.http.put('url', data, { headers, params });\r\n\r\nthis.http.patch('url', data, { headers, params });\r\n\r\nthis.http.delete(`url/${id}`, { headers, params });\r\n```\r\n\r\nOptions—Observe/Response Type\r\n\r\n```typescript\r\nimport { HttpResponse } from '@angular/common/http';\r\n\r\nthis.http.get('url', { observe: 'response' });\r\n```\r\n\r\n## Module\r\n\r\nA module is a container for a group of related components, directives, pipes, and services. It is used to organize an Angular application into cohesive blocks of functionality.\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n})\r\n\r\nexport class AppModule {}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Lazy loading\r\n\r\nLazy loading is a technique used to load modules only when they are needed. This can help reduce the initial load time of the application by loading only the necessary modules.\r\n\r\nExample of lazy loading in non standalone components:\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { AppRoutingModule } from './app-routing.module';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, FormsModule, AppRoutingModule],\r\n declarations: [AppComponent],\r\n bootstrap: [AppComponent],\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\n\r\nconst routes: Routes = [\r\n {\r\n path: 'page-1',\r\n loadChildren: () =\u003e\r\n import('./page-1/page-1.module').then((m) =\u003e m.Page1Module),\r\n },\r\n {\r\n path: 'page-2',\r\n loadChildren: () =\u003e\r\n import('./page-2/page-2.module').then((m) =\u003e m.Page2Module),\r\n },\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule],\r\n})\r\nexport class AppRoutingModule {}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\nimport { Page1Component } from './page-1.component';\r\n\r\nconst routes: Routes = [\r\n {\r\n path: '',\r\n component: Page1Component,\r\n },\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forChild(routes)],\r\n exports: [RouterModule],\r\n})\r\nexport class Page1RoutingModule {}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Page1Component } from './page-1.component';\r\nimport { Page1RoutingModule } from './page-1-routing.module';\r\n\r\n@NgModule({\r\n imports: [CommonModule, Page1RoutingModule],\r\n declarations: [Page1Component],\r\n})\r\nexport class Page1Module {}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\nimport { Page2Component } from './page-2.component';\r\n\r\nconst routes: Routes = [\r\n {\r\n path: '',\r\n component: Page2Component,\r\n },\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forChild(routes)],\r\n exports: [RouterModule],\r\n})\r\nexport class Page2RoutingModule {}\r\n```\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Page2Component } from './page-2.component';\r\nimport { Page2RoutingModule } from './page-2-routing.module';\r\n\r\n@NgModule({\r\n imports: [CommonModule, Page2RoutingModule],\r\n declarations: [Page2Component],\r\n})\r\nexport class Page2Module {}\r\n```\r\n\r\n```html\r\n\u003ch1\u003eLazy Loading Example\u003c/h1\u003e\r\n\u003ca routerLink=\"page-1\"\u003ePage-1\u003c/a\u003e \u0026nbsp;\r\n\u003ca routerLink=\"page-2\"\u003ePage-2\u003c/a\u003e\r\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\r\n```\r\n\r\nExample of lazy loading in standalone components:\r\n\r\n```typescript\r\nimport { Routes } from '@angular/router';\r\n\r\nexport const routes: Routes = [\r\n {\r\n path: 'page-1',\r\n loadComponent: () =\u003e import('./page-1/page-1.component').then((m) =\u003e m.Page1Component),\r\n },\r\n {\r\n path: 'page-2',\r\n loadComponent: () =\u003e import('./page-2/page-2.component').then((m) =\u003e m.Page2Component),\r\n }\r\n];\r\n```\r\n\r\n```typescript\r\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\r\nimport { provideRouter } from '@angular/router';\r\n\r\nimport { routes } from './app.routes';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideZoneChangeDetection({ eventCoalescing: true }),\r\n provideRouter(routes)\r\n ],\r\n};\r\n```\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { RouterOutlet } from '@angular/router';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [RouterOutlet],\r\n templateUrl: './app.component.html',\r\n styleUrl: './app.component.scss'\r\n})\r\nexport class AppComponent {\r\n // component logic here\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003eLazy Loading Example\u003c/h1\u003e\r\n\u003ca routerLink=\"page-1\"\u003ePage-1\u003c/a\u003e \u0026nbsp;\r\n\u003ca routerLink=\"page-2\"\u003ePage-2\u003c/a\u003e\r\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n### Router\r\n\r\nThe Angular Router is a powerful tool that allows you to define navigation paths and routes in your application. It enables you to navigate between different components and views based on the URL path.\r\n\r\nExample of routing in Angular non standalone components:\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { NgModule } from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\n\r\nconst routes: Routes = [\r\n // Define your routes here\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n```\r\n\r\n### Required Route Params\r\n\r\nTo define a route with a required parameter, you can use a colon (`:`) followed by the parameter name. For example, in `app.module.ts`:\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { NgModule } from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\nimport { UserDetailsComponent } from './user-details/user-details.component';\r\n\r\nconst routes: Routes = [\r\n { path: 'user/:id', component: UserDetailsComponent },\r\n // Other routes...\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n```\r\n\r\n### Navigating in the App\r\n\r\nTo navigate to a route with a required parameter, you can use the `Router` service. For example, in a component:\r\n\r\n```typescript\r\n// some-component.component.ts\r\nimport { Router } from '@angular/router';\r\n\r\nexport class SomeComponent {\r\n\r\n constructor(private router: Router) {}\r\n\r\n navigateToUserDetails(userId: number): void {\r\n this.router.navigate(['/user', userId]);\r\n }\r\n}\r\n```\r\n\r\n### Optional Route Params\r\n\r\nTo define a route with an optional parameter, you can use a question mark (`?`) after the parameter name. For example, in `app.module.ts`:\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { NgModule } from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\nimport { UserDetailsComponent } from './user-details/user-details.component';\r\n\r\nconst routes: Routes = [\r\n { path: 'user/:id?', component: UserDetailsComponent },\r\n // Other routes...\r\n];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n```\r\n\r\n### Params\r\n\r\nTo access route parameters in a component, you can use the `ActivatedRoute` service. For example, in a component:\r\n\r\n```typescript\r\n// user-details.component.ts\r\nimport { ActivatedRoute } from '@angular/router';\r\n\r\nexport class UserDetailsComponent {\r\n\r\n constructor(private route: ActivatedRoute) {\r\n // Accessing route parameters\r\n this.route.params.subscribe(params =\u003e {\r\n const userId = params['id'];\r\n // Do something with the userId...\r\n });\r\n }\r\n}\r\n```\r\n\r\n## Route Parameters\r\n\r\nRoute parameters are used to pass data to a route in Angular. They allow you to create dynamic routes that can be customized based on user input or other factors. Route parameters are defined in the route configuration and can be accessed in the component associated with the route.\r\n\r\nThere are three types of route parameters in Angular:\r\n\r\n***Path Parameters***:\r\n\r\nPath parameters are used to extract data from the URL path. They are denoted by placing a colon (\":\") before the parameter name in the route configuration. Path parameters are part of the route path and can be accessed in the component associated with the route. For example:\r\n\r\n```typescript\r\n{ path: 'users/:id', component: UserComponent }\r\n```\r\n\r\nIn this example, the \":id\" parameter is a path parameter. The UserComponent can retrieve the value of the \":id\" parameter from the URL and use it to fetch user data.\r\n\r\n***Query Parameters***:\r\n\r\nQuery parameters are used to pass data as key-value pairs in the URL query string. They are denoted by placing a question mark (\"?\") after the route path, followed by the parameter name and value. Query parameters are not part of the route path but can be accessed in the component associated with the route. For example:\r\n\r\n```typescript\r\n{ path: 'search', component: SearchComponent }\r\n```\r\n\r\nIn this example, the SearchComponent can access query parameters like \"/search?query=angular\" or \"/search?query=react\" and use them to perform a search operation.\r\n\r\n***Optional Parameters***:\r\n\r\nOptional parameters are used to define route parameters that are not required. They are denoted by placing a question mark (\"?\") after the parameter name in the route configuration. Optional parameters can be present or absent in the URL, and the component associated with the route can handle both cases. For example:\r\n\r\n```typescript\r\n{ path: 'products/:id/:category?', component: ProductComponent }\r\n```\r\n\r\nIn this example, the \":category\" parameter is optional. The ProductComponent can handle URLs like \"/products/123\" or \"/products/123/electronics\" based on the presence of the \":category\" parameter.\r\n\r\n## Route Guards\r\n\r\nRoute guards are used to control access to routes in an Angular application. They allow you to implement logic that determines whether a user is allowed to navigate to a particular route or not. Route guards can be used to protect routes based on user authentication, authorization, or other criteria.\r\n\r\nThere are four types of route guards in Angular:\r\n\r\n***CanActivate***:\r\n\r\nThe CanActivate guard is used to determine whether a route can be activated or not. It is typically used to check if a user is authenticated before allowing access to a route. The guard returns a boolean value or an Observable or Promise that resolves to a boolean value. If the guard returns true, the route is activated; if it returns false, the route is blocked.\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport {\r\n CanActivate,\r\n ActivatedRouteSnapshot,\r\n RouterStateSnapshot,\r\n} from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class AuthGuard implements CanActivate {\r\n canActivate(\r\n route: ActivatedRouteSnapshot,\r\n state: RouterStateSnapshot\r\n ): Observable\u003cboolean\u003e | Promise\u003cboolean\u003e | boolean {\r\n // Check if the user is authenticated\r\n return true; // Allow access\r\n }\r\n}\r\n```\r\n\r\n***canActivateFn***:\r\n\r\nThe CanActivateFn guard is a function used to decide if a route can be accessed. It works like the CanActivate guard but is a function instead of a class. It takes two arguments: ActivatedRouteSnapshot and RouterStateSnapshot. The guard returns a boolean value or an Observable or Promise that resolves to a boolean value. If the guard returns true, the route is activated; if it returns false, the route is blocked.\r\n\r\n```typescript\r\nimport {\r\n CanActivate,\r\n ActivatedRouteSnapshot,\r\n RouterStateSnapshot,\r\n} from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\n\r\nexport const authGuard: CanActivateFn = (\r\n route: ActivatedRouteSnapshot,\r\n state: RouterStateSnapshot\r\n) =\u003e {\r\n // Check if the user is authenticated\r\n return true; // Allow access\r\n};\r\n```\r\n\r\n***CanActivateChild***:\r\n\r\nThe CanActivateChild guard is similar to CanActivate but is used to protect child routes of a parent route. It is applied to the parent route configuration and is triggered when any child route is activated. The guard returns a boolean value or an Observable or Promise that resolves to a boolean value.\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport {\r\n CanActivateChild,\r\n ActivatedRouteSnapshot,\r\n RouterStateSnapshot,\r\n} from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class AuthGuard implements CanActivateChild {\r\n canActivateChild(\r\n childRoute: ActivatedRouteSnapshot,\r\n state: RouterStateSnapshot\r\n ): Observable\u003cboolean\u003e | Promise\u003cboolean\u003e | boolean {\r\n // Check if the user is authenticated\r\n return true; // Allow access\r\n }\r\n}\r\n```\r\n\r\n***CanDeactivate***:\r\n\r\nThe CanDeactivate guard is used to determine whether a route can be deactivated or not. It is typically used to prompt the user for confirmation before leaving a route with unsaved changes. The guard returns a boolean value or an Observable or Promise that resolves to a boolean value. If the guard returns true, the route is deactivated; if it returns false, the route is not deactivated.\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport {\r\n CanDeactivate,\r\n ActivatedRouteSnapshot,\r\n RouterStateSnapshot,\r\n} from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class ConfirmDeactivateGuard implements CanDeactivate\u003cany\u003e {\r\n canDeactivate(\r\n component: any,\r\n currentRoute: ActivatedRouteSnapshot,\r\n currentState: RouterStateSnapshot,\r\n nextState?: RouterStateSnapshot\r\n ): Observable\u003cboolean\u003e | Promise\u003cboolean\u003e | boolean {\r\n // Check if the user wants to leave the route\r\n return confirm('Are you sure you want to leave?');\r\n }\r\n}\r\n```\r\n\r\n***CanLoad***:\r\n\r\nThe CanLoad guard is used to determine whether a lazy-loaded module can be loaded or not. It is applied to the route configuration of a lazy-loaded module and is triggered when the module is about to be loaded. The guard returns a boolean value or an Observable or Promise that resolves to a boolean value. If the guard returns true, the module is loaded; if it returns false, the module is not loaded.\r\n\r\n```typescript\r\nimport { Injectable } from '@angular/core';\r\nimport { CanLoad, Route } from '@angular/router';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable()\r\nexport class AuthGuard implements CanLoad {\r\n canLoad(route: Route): Observable\u003cboolean\u003e | Promise\u003cboolean\u003e | boolean {\r\n // Check if the user is authenticated\r\n return true; // Allow loading\r\n }\r\n}\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Observables in Angular\r\n\r\nAn observable is a class that can be used to handle asynchronous data streams. Observables are used to handle data that can arrive over time, such as data received from a server, user input, or timed events.\r\n\r\n### Creating Observables\r\n\r\nThere are several ways to create observables in Angular:\r\n\r\n***Using the Observable Constructor***: You can create an observable using the `Observable` constructor and the `new` keyword. The constructor takes a function as an argument, which is called when the observable is subscribed to.\r\n\r\n```typescript\r\nimport { Observable } from 'rxjs';\r\n\r\nconst observable = new Observable((observer) =\u003e {\r\n observer.next('Hello');\r\n observer.next('World');\r\n observer.complete();\r\n});\r\n```\r\n\r\n***Using the `of` Operator***: You can create an observable from a list of values using the `of` operator. The `of` operator emits each value in the list in sequence.\r\n\r\n```typescript\r\nimport { of } from 'rxjs';\r\n\r\nconst observable = of('Hello', 'World');\r\n```\r\n\r\n***Using the `from` Operator***: You can create an observable from an array, promise, or iterable using the `from` operator. The `from` operator emits each item in the array, promise, or iterable in sequence.\r\n\r\n```typescript\r\nimport { from } from 'rxjs';\r\n\r\nconst observable = from(['Hello', 'World']);\r\n```\r\n\r\n### Subscribing to Observables\r\n\r\nTo receive data from an observable, you need to subscribe to it. The `subscribe` method is used to subscribe to an observable and receive data emitted by the observable.\r\n\r\n```typescript\r\nobservable.subscribe({\r\n next: (value) =\u003e console.log(value),\r\n error: (error) =\u003e console.error(error),\r\n complete: () =\u003e console.log('Complete')\r\n});\r\n```\r\n\r\n### Difference between `observables` and `promises` in Angular\r\n\r\n- **Observables**:\r\n - Observables are lazy, meaning they only execute when subscribed to.\r\n - Observables can emit multiple values over time.\r\n - Observables can be canceled using the `unsubscribe` method.\r\n - Observables can be transformed and combined using operators.\r\n - Observables are used for handling streams of data, such as user input, server responses, and events.\r\n\r\n- **Promises**:\r\n - Promises are eager, meaning they execute immediately when created.\r\n - Promises can only emit a single value.\r\n - Promises cannot be canceled once created.\r\n - Promises do not have built-in transformation or combination methods.\r\n - Promises are used for handling asynchronous operations that produce a single result, such as HTTP requests and file reads.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Unsubscribe in Angular\r\n\r\nIn Angular, managing subscriptions is crucial to avoid memory leaks and improve the performance of your application. Here are five ways to unsubscribe in Angular:\r\n\r\n1. Using the takeUntil operator:\r\n\r\n - Create a subject to act as a notifier.\r\n - In your component, create a private property for the subject.\r\n - Subscribe to observables using the takeUntil operator with the subject as the parameter.\r\n - Emit a value on the subject when you want to unsubscribe, typically in the ngOnDestroy lifecycle hook.\r\n - In the ngOnDestroy hook, call complete() on the subject to stop emitting values.\r\n\r\n ```typescript\r\n import { Component, OnDestroy } from '@angular/core';\r\n import { Subject } from 'rxjs';\r\n import { takeUntil } from 'rxjs/operators';\r\n\r\n @Component({\r\n selector: 'app-example',\r\n templateUrl: './example.component.html',\r\n styleUrls: ['./example.component.css']\r\n })\r\n export class ExampleComponent implements OnDestroy {\r\n private unsubscribe$ = new Subject\u003cvoid\u003e();\r\n\r\n ngOnInit() {\r\n // Subscribe to an observable\r\n someObservable.pipe(takeUntil(this.unsubscribe$)).subscribe((data) =\u003e {\r\n // Handle data\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n this.unsubscribe$.next();\r\n this.unsubscribe$.complete();\r\n }\r\n }\r\n ```\r\n\r\n2. Using the async pipe:\r\n\r\n - In your template, use the async pipe to subscribe to observables directly.\r\n - Angular automatically handles the subscription and unsubscription for you.\r\n - Ensure you don't manually subscribe to the observable in your component.\r\n\r\n ```html\r\n \u003cdiv\u003e{{ someObservable$ | async }}\u003c/div\u003e\r\n ```\r\n\r\n3. Using the Subscription object:\r\n\r\n - Declare a Subscription property in your component.\r\n - Assign the subscription to the property when subscribing.\r\n - In the ngOnDestroy hook, unsubscribe from the subscription.\r\n\r\n ```typescript\r\n import { Component, OnDestroy } from '@angular/core';\r\n import { Subscription } from 'rxjs';\r\n\r\n @Component({\r\n selector: 'app-example',\r\n templateUrl: './example.component.html',\r\n styleUrls: ['./example.component.css']\r\n })\r\n export class ExampleComponent implements OnDestroy {\r\n private subscription: Subscription;\r\n\r\n ngOnInit() {\r\n // Assign the subscription\r\n this.subscription = someObservable.subscribe((data) =\u003e {\r\n // Handle data\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n // Unsubscribe from the subscription\r\n this.subscription.unsubscribe();\r\n }\r\n }\r\n ```\r\n\r\n4. Using the unsubscribe operator:\r\n\r\n - Store the subscription in a variable.\r\n - Call the unsubscribe method on the subscription in the ngOnDestroy hook.\r\n\r\n ```typescript\r\n import { Component, OnDestroy } from '@angular/core';\r\n\r\n @Component({\r\n selector: 'app-example',\r\n templateUrl: './example.component.html',\r\n styleUrls: ['./example.component.css']\r\n })\r\n export class ExampleComponent implements OnDestroy {\r\n private subscription;\r\n\r\n ngOnInit() {\r\n // Assign the subscription\r\n this.subscription = someObservable.subscribe((data) =\u003e {\r\n // Handle data\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n // Unsubscribe from the subscription\r\n this.subscription.unsubscribe();\r\n }\r\n }\r\n ```\r\n\r\n5. Using the ngOnDestroy hook and manual unsubscription:\r\n\r\n - Declare an array to store all the subscriptions.\r\n - Push the subscription to the array when subscribing.\r\n - Loop through the array in the ngOnDestroy hook and unsubscribe from each subscription.\r\n\r\n ```typescript\r\n import { Component, OnDestroy } from '@angular/core';\r\n import { Subscription } from 'rxjs';\r\n\r\n @Component({\r\n selector: 'app-example',\r\n templateUrl: './example.component.html',\r\n styleUrls: ['./example.component.css']\r\n })\r\n export class ExampleComponent implements OnDestroy {\r\n private subscriptions: Subscription[] = [];\r\n\r\n ngOnInit() {\r\n // Push the subscription to the array\r\n this.subscriptions.push(someObservable.subscribe((data) =\u003e {\r\n // Handle data\r\n }));\r\n }\r\n\r\n ngOnDestroy() {\r\n // Unsubscribe from all subscriptions\r\n this.subscriptions.forEach(subscription =\u003e subscription.unsubscribe());\r\n }\r\n }\r\n ```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Renderer2\r\n\r\nRenderer2 is a utility class that provides methods to manipulate and interact with the DOM (Document Object Model). It is used to perform operations such as creating, modifying, and removing elements, applying styles, and listening to events.\r\n\r\n```typescript\r\nimport { Component, Renderer2, ElementRef } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: `\r\n \u003cbutton (click)=\"changeColor()\"\u003eChange Color\u003c/button\u003e\r\n `\r\n})\r\nexport class ExampleComponent {\r\n constructor(private renderer: Renderer2, private el: ElementRef) { }\r\n\r\n changeColor() {\r\n const button = this.el.nativeElement.querySelector('button');\r\n this.renderer.setStyle(button, 'background-color', 'red');\r\n }\r\n}\r\n\r\n```\r\n\r\n## JIT\r\n\r\n**Just-in-Time** (JIT) is a type of compilation that compiles your app in the browser at runtime. This is the default compilation mode for Angular applications.\r\n\r\n### Advantages of JIT\r\n\r\n- Faster development cycle as changes can be seen immediately.\r\n- No build step required during development.\r\n- More flexible for dynamic template generation.\r\n\r\n## AOT\r\n\r\n**Ahead-of-Time** (AOT) is a type of compilation that compiles your app at build time. This mode is used to pre-compile your Angular application before deployment.\r\n\r\n### Advantages of AOT\r\n\r\n- Faster startup times as the browser only needs to execute the compiled code.\r\n- Improved performance due to optimized and pre-compiled templates.\r\n- Better security as the templates are already compiled and validated before deployment.\r\n- Smaller bundle sizes since the templates are not included.\r\n\r\n## JIT vs AOT\r\n\r\n### Differences between AOT and JIT\r\n\r\n| Feature | AOT | JIT |\r\n|---|---|---|\r\n| Compilation time | Build time | Runtime |\r\n| Application size | Smaller | Larger |\r\n| Application load time | Faster | Slower |\r\n| Debugging | More difficult | Easier |\r\n| Development | More difficult | Easier |\r\n| Performance | Better | Worse |\r\n\r\n## Deferrable Views\r\n\r\nDeferrable views can be used in component template to defer the loading of select dependencies within that template.\r\n\r\n```typescript\r\n@defer {\r\n \u003clarge-component /\u003e\r\n}\r\n```\r\n\r\n## Meta tags\r\n\r\n### Title Service\r\n\r\n```typescript\r\nimport { BrowserModule, Title } from '@angular/platform-browser';\r\n```\r\n\r\n```typescript\r\nimport { BrowserModule, Title } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { AppRoutingModule } from './app-routing.module';\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule\r\n ],\r\n providers: [Title],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n```typescript\r\nexport class TitleComponent implements OnInit {\r\n constructor(private title:Title) { }\r\n}\r\n```\r\n\r\n```typescript\r\nngOnInit() {\r\n this.title.setTitle(\"Learn Angular\")\r\n}\r\n```\r\n\r\n```typescript\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { Title, MetaDefinition } from '@angular/platform-browser';\r\n \r\n@Component({\r\n template: `\u003ch1\u003eApp Component\u003c/h1\u003e`\r\n})\r\nexport class AppComponent implements OnInit {\r\n title = 'App Component';\r\n \r\n constructor(private title:Title){\r\n }\r\n \r\n ngOnInit() {\r\n this.title.setTitle(\"Learn Angular\")\r\n }\r\n \r\n}\r\n```\r\n\r\n### Title Service Example\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { BrowserModule, Title } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n \r\nimport { AppRoutingModule } from './app-routing.module';\r\nimport { AppComponent } from './app.component';\r\nimport { HomeComponent } from './home.component';\r\n \r\n@NgModule({\r\n declarations: [\r\n AppComponent, HomeComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule\r\n ],\r\n providers: [Title],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n```typescript\r\n// app-routing.module.ts\r\nimport { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\nimport { HomeComponent } from './home.component';\r\n\r\nconst routes: Routes = [\r\n {path: 'home', component:HomeComponent},\r\n];\r\n \r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n```\r\n\r\n```typescript\r\n// app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { Title } from '@angular/platform-browser';\r\n \r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n title = 'Title Service Example';\r\n \r\n constructor(private titleService:Title) {\r\n }\r\n \r\n ngOnInit() {\r\n this.titleService.setTitle(this.title);\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!-- app.component.html --\u003e\r\n\u003ch1\u003eTitle Service Example\u003c/h1\u003e\r\n \r\n\u003cul\u003e\r\n \u003cli\u003e\u003ca [routerLink]=\"['/home']\"\u003eHome\u003c/a\u003e \u003c/li\u003e\r\n\u003c/ul\u003e\r\n \r\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\r\n```\r\n\r\n```typescript\r\n// home.component.ts\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { Title } from '@angular/platform-browser';\r\n\r\n@Component({\r\n template: `\u003ch1\u003eHome Component\u003c/h1\u003e`\r\n})\r\nexport class HomeComponent implements OnInit {\r\n title = 'Home Component Title';\r\n \r\n constructor(private titleService:Title){\r\n }\r\n \r\n ngOnInit() {\r\n this.titleService.setTitle(this.title);\r\n }\r\n \r\n}\r\n```\r\n\r\n### Dynamic Title\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { BrowserModule, Title } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n \r\nimport { AppRoutingModule } from './app-routing.module';\r\nimport { AppComponent } from './app.component';\r\nimport { HomeComponent } from './home.component';\r\n \r\n@NgModule({\r\n declarations: [\r\n AppComponent, HomeComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule\r\n ],\r\n providers: [Title],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n```typescript\r\n// app-routing.module.ts\r\nimport { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\nimport { HomeComponent } from './home.component';\r\nimport { PParentComponent } from './parent.component';\r\nimport { ChildComponent } from './child.component';\r\n\r\nconst routes: Routes = [\r\n {path: '', component:HomeComponent, data : {title:'Title for Home Component'}},\r\n {path: 'parent', component:ParentComponent, data : {title:'Title for Parent Component'},\r\n children: [\r\n { path: 'child', component:ChildComponent, data : {title:'Title for Child Component'}}\r\n ]\r\n },\r\n];\r\n \r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes)],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n```\r\n\r\n```typescript\r\n// app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { Title } from '@angular/platform-browser';\r\nimport { Router, NavigationEnd, ActivatedRoute } from '@angular/router';\r\nimport { filter, map } from 'rxjs/operators';\r\n \r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n constructor(\r\n private router: Router,\r\n private activatedRoute: ActivatedRoute,\r\n private titleService: Title\r\n ) { }\r\n \r\n ngOnInit() {\r\n \r\n this.router.events.pipe(\r\n filter(event =\u003e event instanceof NavigationEnd),\r\n )\r\n .subscribe(() =\u003e {\r\n \r\n var rt = this.getChild(this.activatedRoute)\r\n \r\n rt.data.subscribe(data =\u003e {\r\n console.log(data);\r\n this.titleService.setTitle(data.title)})\r\n })\r\n \r\n }\r\n \r\n getChild(activatedRoute: ActivatedRoute) {\r\n if (activatedRoute.firstChild) {\r\n return this.getChild(activatedRoute.firstChild);\r\n } else {\r\n return activatedRoute;\r\n }\r\n \r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003c!-- app.component.html --\u003e\r\n\u003ch1\u003eDynamic Title Example\u003c/h1\u003e\r\n \r\n\u003cul\u003e\r\n \u003cli\u003e\u003ca routerLink=\"\"\u003eHome\u003c/a\u003e \u003c/li\u003e\r\n \u003cli\u003e\u003ca [routerLink]=\"['/parent']\"\u003eParent\u003c/a\u003e \u003c/li\u003e\r\n \u003cli\u003e\u003ca [routerLink]=\"['/child']\"\u003eChild\u003c/a\u003e \u003c/li\u003e\r\n\u003c/ul\u003e\r\n \r\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\r\n```\r\n\r\n```typescript\r\n// home.component.ts\r\nimport { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n template: `\u003ch1\u003eHome Component\u003c/h1\u003e`\r\n})\r\nexport class HomeComponent implements OnInit {\r\n \r\n constructor(){\r\n }\r\n \r\n ngOnInit() {\r\n }\r\n \r\n}\r\n```\r\n\r\n```typescript\r\n// parent.component.ts\r\nimport { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n template: `\u003ch1\u003eParent Component\u003c/h1\u003e\r\n \u003crouter-outlet\u003e\u003c/router-outlet\u003e\r\n `\r\n})\r\nexport class ParentComponent implements OnInit {\r\n \r\n constructor(){\r\n }\r\n \r\n ngOnInit() {\r\n }\r\n \r\n}\r\n```\r\n\r\n```typescript\r\n// child.component.ts\r\nimport { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n template: `\u003ch1\u003eChild Component\u003c/h1\u003e`\r\n})\r\nexport class ChildComponent implements OnInit {\r\n \r\n constructor(){\r\n }\r\n \r\n ngOnInit() {\r\n }\r\n \r\n}\r\n```\r\n\r\n### Meta Service\r\n\r\n```typescript\r\nimport { BrowserModule, Meta } from '@angular/platform-browser';\r\n```\r\n\r\n```typescript\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule\r\n ],\r\n providers: [Meta],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n```typescript\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { Meta, MetaDefinition } from '@angular/platform-browser';\r\n \r\n@Component({\r\n template: `\u003ch1\u003eApp Component\u003c/h1\u003e`\r\n})\r\nexport class AppComponent implements OnInit {\r\n title = 'App Component';\r\n \r\n constructor(private metaService:Meta){\r\n }\r\n \r\n ngOnInit() {\r\n this.metaService.addTag( { name:'description',content:\"Article Description\"});\r\n }\r\n \r\n}\r\n```\r\n\r\nAdding Tags with addTag() \u0026 addTags()\r\n\r\n```typescript\r\nthis.metaService.addTag( { name:'description',content:\"Article Description\"});\r\n```\r\n\r\n```typescript\r\nthis.metaService.addTag( \r\n { name: 'description', content: 'Article Description' },\r\n { name: 'robots', content: 'index,follow' },\r\n { property: 'og:title', content: 'Content Title for social media' }\r\n);\r\n```\r\n\r\nReading the Tags with getTag()\r\n\r\n```typescript\r\nthis.metaService.getTag(\"name='description'\")\r\n```\r\n\r\nUpdate the Tag with updateTag()\r\n\r\n```typescript\r\nthis.metaService.updateTag( { name:'robots', content:'index, nofoloow'},\"name='robots'\");\r\n```\r\n\r\nRemoving the Tag with removeTag()\r\n\r\n```typescript\r\nthis.metaService.removeTag(\"name='robots'\");\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Angular Signals\r\n\r\nAngular Signals is a powerful system that provides detailed monitoring of state usage within an application, enabling the framework to efficiently optimize rendering updates.\r\n\r\n### Writing Signals\r\n\r\nWritable signals provide an API for updating their values directly. You create writable signals by calling the `signal` function with the signal's initial value:\r\n\r\n```typescript\r\nimport { signal } from '@angular/core';\r\n\r\nconst count = signal(0); // Creates a writable signal with an initial value of 0\r\n\r\ncount.set(5); // Updates the signal's value to 5\r\nconsole.log(count()); // Reads the current value of the signal, which is 5\r\n```\r\n\r\n### Computed Signals\r\n\r\nComputed signals are read-only signals that derive their value from other signals. You define computed signals using the `computed` function and specifying a derivation:\r\n\r\n```typescript\r\nimport { signal, computed } from '@angular/core';\r\n\r\nconst count = signal(0);\r\nconst doubleCount = computed(() =\u003e count() * 2); // Creates a computed signal that doubles the count\r\n\r\nconsole.log(doubleCount()); // Reads the current value of the computed signal, which is 0\r\n\r\ncount.set(3); // Updates the count signal to 3\r\nconsole.log(doubleCount()); // The computed signal automatically updates to 6\r\n```\r\n\r\n### Effects\r\n\r\nSignals are useful because they notify interested consumers when they change. An effect is an operation that runs whenever one or more signal values change. You can create an effect with the `effect` function:\r\n\r\n```typescript\r\nimport { signal, effect } from '@angular/core';\r\n\r\nconst count = signal(0);\r\n\r\neffect(() =\u003e {\r\n console.log('Count changed to:', count()); // Logs the count value whenever it changes\r\n});\r\n\r\ncount.set(5); // Triggers the effect, logging \"Count changed to: 5\"\r\n```\r\n\r\nHere is an example of using Angular Signals in an Angular component:\r\n\r\n```typescript\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { signal, computed } from '@angular/core'; // Import from '@angular/core'\r\n\r\n@Component({\r\n selector: 'my-app',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n count = signal(0);\r\n doubleCount = computed(() =\u003e this.count() * 2);\r\n\r\n constructor() {}\r\n\r\n ngOnInit() {\r\n // Optional logging for debugging displayedCount changes\r\n // console.log('Displayed count changed to:', this.displayedCount());\r\n }\r\n\r\n incrementCount() {\r\n this.count.set(this.count() + 1);\r\n }\r\n\r\n decrementCount() {\r\n this.count.update((value) =\u003e Math.max(0, value - 1));\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003ch1\u003eAngular Signals Example\u003c/h1\u003e\r\n\r\n\u003cbutton (click)=\"incrementCount()\" style=\"margin-right: 10px;\"\u003eIncrement Count\u003c/button\u003e\r\n\u003cbutton (click)=\"decrementCount()\"\u003eDecrement Count\u003c/button\u003e\r\n\r\n\u003cp\u003eCount: {{ count() }}\u003c/p\u003e\r\n\u003cp\u003eDouble Count: {{ doubleCount() }}\u003c/p\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Security\r\n\r\nThe security of an Angular application is a critical aspect that needs to be considered during development. Here are some best practices to enhance the security of your Angular application:\r\n\r\n## Preventing cross-site scripting (XSS)\r\n\r\nCross-site scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. To prevent XSS attacks in Angular applications, you can use the following best practices:\r\n\r\n- Use Angular's built-in sanitization mechanisms to sanitize user input and prevent script injection.\r\n- Avoid using unsafe methods like innerHTML and instead use Angular's data binding syntax to render dynamic content.\r\n- Use Angular's built-in security features like Content Security Policy (CSP) to restrict the sources of scripts and other resources that can be loaded by your application.\r\n- Enable strict mode in Angular templates to prevent template expressions from executing arbitrary code.\r\n- Use Angular's HttpClient module to make HTTP requests and automatically sanitize responses to prevent XSS attacks.\r\n\r\n## Angular's cross-site scripting security model\r\n\r\nAngular provides a built-in security model to prevent cross-site scripting (XSS) attacks in applications. This security model includes the following features:\r\n\r\n- Automatic sanitization of user input: Angular automatically sanitizes user input to prevent script injection and other security vulnerabilities.\r\n- Strict mode in templates: Angular templates run in strict mode by default, which prevents template expressions from executing arbitrary code.\r\n- Content Security Policy (CSP): Angular applications can use CSP to restrict the sources of scripts and other resources that can be loaded by the application.\r\n- Trusted Types: Angular supports Trusted Types, a new web platform feature that helps prevent DOM-based XSS attacks by enforcing strict type checking on DOM APIs.\r\n\r\n## Sanitization and security contexts\r\n\r\nAngular provides a built-in sanitization mechanism to prevent cross-site scripting (XSS) attacks in applications. Sanitization is the process of cleaning user input to remove potentially dangerous content, such as script tags and event handlers. Angular uses security contexts to determine how to sanitize user input based on its intended use.\r\n\r\nAngular provides the following security contexts for sanitization:\r\n\r\n- HTML: Sanitizes user input for use in HTML contexts, such as rendering dynamic content in templates.\r\n- Style: Sanitizes user input for use in CSS contexts, such as setting inline styles.\r\n- Script: Sanitizes user input for use in script contexts, such as event handlers and script tags.\r\n- URL: Sanitizes user input for use in URL contexts, such as setting href attributes.\r\n- Resource URL: Sanitizes user input for use in resource URL contexts, such as loading external resources.\r\n\r\n## Sanitization example\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n template: `\u003cdiv [innerHTML]=\"safeHtml\"\u003e\u003c/div\u003e`\r\n})\r\nexport class AppComponent {\r\n safeHtml: SafeHtml;\r\n\r\n constructor(private sanitizer: DomSanitizer) {\r\n const untrustedHtml = '\u003cimg src=x onerror=alert(1)\u003e';\r\n this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(untrustedHtml);\r\n }\r\n}\r\n```\r\n\r\n## Direct use of the DOM APIs and explicit sanitization calls\r\n\r\nDirectly using the DOM APIs to manipulate the DOM can introduce security vulnerabilities in Angular applications. To prevent XSS attacks, avoid using unsafe methods like innerHTML and instead use Angular's built-in sanitization mechanisms to render dynamic content safely.\r\n\r\n```typescript\r\nimport { Renderer2 } from '@angular/core';\r\n\r\nconstructor(private renderer: Renderer2, private sanitizer: DomSanitizer) { }\r\n\r\nconst div = this.renderer.createElement('div');\r\nconst unsafeContent = '\u003cscript\u003ealert(\"XSS\")\u003c/script\u003e';\r\nconst sanitizedContent = this.sanitizer.sanitize(SecurityContext.HTML, unsafeContent);\r\nthis.renderer.setProperty(div, 'innerHTML', sanitizedContent);\r\ndocument.body.appendChild(div);\r\n```\r\n\r\n## Trusting safe values\r\n\r\nAngular provides a mechanism to trust safe values and bypass the built-in sanitization mechanisms when rendering trusted content. To trust a safe value, you can use the bypassSecurityTrustHtml, bypassSecurityTrustStyle, bypassSecurityTrustScript, bypassSecurityTrustUrl, and bypassSecurityTrustResourceUrl methods provided by the DomSanitizer service.\r\n\r\n```typescript\r\nconst safeHtml = this.sanitizer.bypassSecurityTrustHtml('\u003cb\u003eSafe Content\u003c/b\u003e');\r\n```\r\n\r\n## Content security policy\r\n\r\nContent Security Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) attacks by restricting the sources of scripts and other resources that can be loaded by a web application. Angular applications can use CSP to define a policy that specifies which content is allowed to be loaded by the application.\r\n\r\nTo enable CSP in an Angular application, you can add a Content-Security-Policy header to the HTTP response from the server. The CSP header should include directives that restrict the sources of scripts, styles, images, fonts, and other resources that can be loaded by the application.\r\n\r\n```typescript\r\nContent-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://example.com; img-src 'self' https://example.com; font-src 'self' https://example.com;\r\n```\r\n\r\n## Enforcing Trusted Types\r\n\r\nTrusted Types is a new web platform feature that helps prevent DOM-based cross-site scripting (XSS) attacks by enforcing strict type checking on DOM APIs. Angular applications can use Trusted Types to ensure that only trusted values are passed to DOM APIs, preventing script injection and other security vulnerabilities.\r\n\r\nTo enable Trusted Types in an Angular application, you can configure the Trusted Types policy using the TrustedTypesConfig token provided by Angular. The policy can specify which types of values are considered trusted and enforce strict type checking on DOM APIs.\r\n\r\n```typescript\r\nimport { InjectionToken } from '@angular/core';\r\n\r\nexport const TRUSTED_TYPES_CONFIG = new InjectionToken('TRUSTED_TYPES_CONFIG');\r\n\r\nconst trustedTypesConfig = {\r\n createPolicy: (name, policy) =\u003e {\r\n return policy;\r\n }\r\n};\r\n```\r\n\r\n```typescript\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { AppComponent } from './app.component';\r\nimport { TRUSTED_TYPES_CONFIG } from './trusted-types.config';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule\r\n ],\r\n providers: [\r\n { provide: TRUSTED_TYPES_CONFIG, useValue: trustedTypesConfig }\r\n ],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n## Use the AOT template compiler\r\n\r\nThe Angular Ahead-of-Time (AOT) template compiler compiles Angular templates at build time, which helps prevent cross-site scripting (XSS) attacks by statically analyzing the templates and generating optimized code. AOT compilation eliminates the need for the browser to compile templates at runtime, reducing the risk of template injection vulnerabilities.\r\n\r\nTo enable AOT compilation in an Angular application, you can use the ngc command to compile the application ahead of time. AOT compilation is recommended for production builds to improve performance, security, and compatibility with Content Security Policy (CSP) restrictions.\r\n\r\n```bash\r\nng build --aot\r\n```\r\n\r\n## Server-side XSS protection\r\n\r\nServer-side XSS protection is a security feature that helps prevent cross-site scripting (XSS) attacks by validating and sanitizing user input on the server before rendering it in the browser. To protect against XSS attacks, you can implement server-side input validation and sanitization to ensure that user input is safe and does not contain malicious content.\r\n\r\n## HTTP-level vulnerabilities\r\n\r\nAngular applications can be vulnerable to various HTTP-level attacks, such as cross-site request forgery (CSRF), cross-site scripting (XSS), and cross-site script inclusion (XSSI). To protect against these vulnerabilities, you can use Angular's built-in security features, such as HttpClient XSRF/CSRF protection, custom cookie/header names, and disabling XSRF protection.\r\n\r\n## Cross-site request forgery\r\n\r\nCross-site request forgery (CSRF) is a security vulnerability that allows attackers to execute unauthorized actions on behalf of authenticated users. To prevent CSRF attacks in Angular applications, you can use Angular's built-in XSRF/CSRF protection mechanism to add a token to HTTP requests and validate it on the server.\r\n\r\n```typescript\r\nimport { HttpClientModule } from '@angular/common/http';\r\nimport { HttpClientXsrfModule } from '@angular/common/http';\r\n\r\n@NgModule({\r\n imports: [\r\n HttpClientModule,\r\n HttpClientXsrfModule.withOptions({\r\n cookieName: 'XSRF-TOKEN',\r\n headerName: 'X-XSRF-TOKEN'\r\n })\r\n ]\r\n})\r\n\r\nexport class AppModule { }\r\n```\r\n\r\n## HttpClient XSRF/CSRF security\r\n\r\nAngular's HttpClient module provides built-in support for cross-site request forgery (CSRF) protection using the XSRF/CSRF token mechanism. The HttpClientXsrfModule.withOptions method allows you to configure custom cookie and header names for the XSRF/CSRF token.\r\n\r\n```typescript\r\nimport { HttpClientModule } from '@angular/common/http';\r\nimport { HttpClientXsrfModule } from '@angular/common/http';\r\n\r\n@NgModule({\r\n imports: [\r\n HttpClientModule,\r\n HttpClientXsrfModule.withOptions({\r\n cookieName: 'XSRF-TOKEN',\r\n headerName: 'X-XSRF-TOKEN'\r\n })\r\n ]\r\n})\r\n\r\nexport class AppModule { }\r\n```\r\n\r\n## Configure custom cookie/header names\r\n\r\nAngular's HttpClient module allows you to configure custom cookie and header names for the XSRF/CSRF token using the HttpClientXsrfModule.withOptions method. By specifying custom names for the XSRF/CSRF token, you can enhance the security of your application and prevent CSRF attacks.\r\n\r\n```typescript\r\nimport { HttpClientModule } from '@angular/common/http';\r\nimport { HttpClientXsrfModule } from '@angular/common/http';\r\n\r\n@NgModule({\r\n imports: [\r\n HttpClientModule,\r\n HttpClientXsrfModule.withOptions({\r\n cookieName: 'XSRF-TOKEN',\r\n headerName: 'X-XSRF-TOKEN'\r\n })\r\n ]\r\n})\r\n\r\nexport class AppModule { }\r\n```\r\n\r\n## Disabling XSRF protection\r\n\r\nAngular's HttpClient module provides built-in support for cross-site request forgery (CSRF) protection using the XSRF/CSRF token mechanism. If you want to disable XSRF protection for specific requests, you can use the { withCredentials: true } option in the HttpClient request.\r\n\r\n```typescript\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\nconstructor(private http: HttpClient) { }\r\n\r\nthis.http.get('/api/data', { withCredentials: true });\r\n```\r\n\r\n## Cross-site script inclusion (XSSI)\r\n\r\nCross-site script inclusion (XSSI) is a security vulnerability that allows attackers to include external scripts in an application and execute malicious code. To prevent XSSI attacks in Angular applications, you can use Angular's built-in security features, such as HttpClient XSSI protection, to validate and sanitize external script responses.\r\n\r\n## Auditing Angular applications\r\n\r\nAuditing Angular applications is an essential step to identify and fix security vulnerabilities in the codebase. You can use various tools and techniques to audit Angular applications, such as security scanners, code reviews, penetration testing, and security best practices.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Angular Animations\r\n\r\nAngular's animation system is built on CSS functionality in order to animate any property that the browser considers animatable. These properties includes positions, sizes, transforms, colors, borders etc. The Angular modules for animations are @angular/animations and @angular/platform-browser.\r\n\r\n### Installing Angular Animations\r\n\r\n```bash\r\nnpm install @angular/animations\r\n```\r\n\r\n### Importing Angular Animations\r\n\r\nTo use Angular animations in an Angular application, you need to import the BrowserAnimationsModule module in the app.module.ts file.\r\n\r\n```typescript\r\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n BrowserAnimationsModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\n\r\nexport class AppModule { }\r\n```\r\n\r\n### Animation Example\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.css'],\r\n animations: [\r\n trigger('fadeInOut', [\r\n transition(':enter', [\r\n style({ opacity: 0 }),\r\n animate('1s', style({ opacity: 1 }))\r\n ]),\r\n transition(':leave', [\r\n animate('1s', style({ opacity: 0 }))\r\n ])\r\n ])\r\n ]\r\n})\r\n\r\nexport class AppComponent {\r\n show = false;\r\n\r\n toggle() {\r\n this.show = !this.show;\r\n }\r\n}\r\n```\r\n\r\n```html\r\n\u003cbutton (click)=\"toggle()\"\u003eToggle\u003c/button\u003e\r\n\u003cdiv *ngIf=\"show\" @fadeInOut\u003e\r\n \u003ch1\u003eAngular Animation Example\u003c/h1\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Angular Universal\r\n\r\nAngular Universal is a server-side rendering (SSR) solution for Angular applications that allows you to render your application on the server and send the fully rendered HTML to the client. This can improve performance, SEO, and user experience by reducing the time to first contentful paint and enabling search engines to crawl and index your application.\r\n\r\n### Creating an Angular Universal application\r\n\r\nTo create an Angular Universal application, you can use the Angular CLI to generate a new project with the Universal schematic.\r\n\r\n```bash\r\nng new --ssr\r\n```\r\n\r\nTo add Angular Universal to an existing Angular application, you can use the Angular CLI to add the Universal schematic to the project.\r\n\r\n```bash\r\nng add @angular/ssr\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Bootstrap\r\n\r\nBootstrap is a popular front-end framework for building responsive web applications. It provides a set of CSS and JavaScript components that can be used to create modern and mobile-friendly user interfaces.\r\n\r\n### Installing Bootstrap\r\n\r\n```bash\r\nnpm install bootstrap\r\n```\r\n\r\n### Importing Bootstrap\r\n\r\nTo use Bootstrap in an Angular application, you need to import the Bootstrap CSS file in the styles array of the angular.json file.\r\n\r\n```json\r\n\"styles\": [\r\n \"node_modules/bootstrap/dist/css/bootstrap.min.css\",\r\n \"src/styles.css\"\r\n]\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Angular Material\r\n\r\nAngular Material is a UI component library for Angular applications that provides a set of reusable and customizable components, such as buttons, cards, dialogs, and menus. It is built on top of the Angular CDK (Component Dev Kit) and follows the Material Design guidelines.\r\n\r\n### Installing Angular Material\r\n\r\n```bash\r\nng add @angular/material\r\n```\r\n\r\n### Importing Angular Material\r\n\r\nTo use Angular Material in an Angular application, you need to import the required modules in the app.module.ts file.\r\n\r\n```typescript\r\nimport { MatSliderModule } from '@angular/material/slider';\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n BrowserAnimationsModule,\r\n MatSliderModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\n\r\nexport class AppModule { }\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Tailwind CSS\r\n\r\nTailwind CSS is a utility-first CSS framework that provides a set of pre-built utility classes for styling web applications. It allows you to build custom designs by composing utility classes together, rather than writing custom CSS styles.\r\n\r\n### Installing Tailwind CSS\r\n\r\n```bash\r\nnpm install -D tailwindcss postcss autoprefixer\r\nnpx tailwindcss init\r\n```\r\n\r\n### Configure your template paths\r\n\r\n```javascript\r\n// tailwind.config.js\r\n/** @type {import('tailwindcss').Config} */\r\nmodule.exports = {\r\n content: [\r\n \"./src/**/*.{html,ts}\",\r\n ],\r\n theme: {\r\n extend: {},\r\n },\r\n plugins: [],\r\n};\r\n```\r\n\r\n### Importing Tailwind CSS\r\n\r\n```css\r\n/* styles.css */\r\n@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n```\r\n\r\n### Upgrading Tailwind CSS\r\n\r\nTo upgrade Tailwind CSS to the latest version, follow the steps outlined in the [Tailwind CSS Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide). This guide provides detailed instructions on how to update your Tailwind CSS configuration and resolve any breaking changes.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## PrimeNG\r\n\r\nPrimeNG is a popular UI component library for Angular applications that provides a set of rich and customizable components, such as data tables, calendars, dialogs, and charts. It is built on top of the PrimeFaces library and follows the PrimeNG design guidelines.\r\n\r\n### Installing PrimeNG\r\n\r\n```bash\r\nnpm install primeng\r\n```\r\n\r\n### Importing PrimeNG\r\n\r\nTo use PrimeNG in an Angular application, you need to import the required styles and modules in the angular.json file.\r\n\r\n```json\r\n// angular.json\r\n\"styles\": [\r\n \"node_modules/primeng/resources/themes/saga-blue/theme.css\",\r\n \"node_modules/primeng/resources/primeng.min.css\",\r\n \"src/styles.css\"\r\n]\r\n```\r\n\r\n```css\r\n/* styles.css */\r\n@import 'primeng/resources/themes/saga-blue/theme.css';\r\n@import 'primeng/resources/primeng.min.css';\r\n```\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## SPA\r\n\r\n**SPA** (Single Page Application) is a web application that dynamically rewrites the current page instead of loading entire new pages from the server, providing a fluid and responsive user experience.\r\n\r\n### Advantages of SPA\r\n\r\n- **Faster Load Times**: Loads the initial page once; subsequent interactions update dynamically.\r\n- **Better User Experience**: No full page reloads, allowing faster navigation and smoother transitions.\r\n- **Reduced Server Load**: Less server load as only necessary data is fetched.\r\n- **Improved SEO**: Optimizable for search engines with server-side rendering and meta tags.\r\n- **Offline Support**: Accessible offline using service workers and caching.\r\n- **Mobile Support**: Optimized for mobile with responsive design and touch gestures.\r\n- **Scalability**: Handles many users and interactions with performance optimizations like lazy loading.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## PWA\r\n\r\nProgressive Web Apps (PWAs) are web applications that provide a native app-like experience to users, including offline support, push notifications, and home screen installation. Angular provides built-in support for creating PWAs using the @angular/pwa package.\r\n\r\n### Installing PWA\r\n\r\n```bash\r\nng add @angular/pwa\r\n```\r\n\r\n### Configuring PWA\r\n\r\nTo configure the PWA settings, you can modify the ngsw-config.json file in the src/ directory.\r\n\r\n```json\r\n{\r\n \"index\": \"/index.html\",\r\n \"assetGroups\": [\r\n {\r\n \"name\": \"app\",\r\n \"installMode\": \"prefetch\",\r\n \"resources\": {\r\n \"files\": [\r\n \"/favicon.ico\",\r\n \"/index.html\",\r\n \"/*.css\",\r\n \"/*.js\"\r\n ]\r\n }\r\n }\r\n ]\r\n}\r\n```\r\n\r\n### Building PWA\r\n\r\nTo build the PWA, you can run the ng build --prod command with the --configuration=production flag.\r\n\r\n```bash\r\nng build --prod --configuration=production\r\n```\r\n\r\n### Service Worker\r\n\r\nThe service worker is a script that runs in the background of the browser and handles tasks such as caching assets, intercepting network requests, and providing offline support. Angular's service worker is generated automatically when you create a PWA using the @angular/pwa package.\r\n\r\n### Features of PWA\r\n\r\n**Offline Support** - The service worker caches assets and intercepts network requests to provide offline support for the application.\r\n\r\n**Push Notifications** - The service worker can receive push notifications from the server and display them to the user.\r\n\r\n**Background Sync** - The service worker can perform background sync tasks, such as sending data to the server when the network connection is available.\r\n\r\n**Home Screen Installation** - The service worker can prompt the user to install the application on the home screen for quick access.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## CLI Commands\r\n\r\nInstalling Angular CLI\r\n\r\n```bash\r\nnpm install -g @angular/cli\r\n```\r\n\r\nHelp\r\n\r\n```bash\r\nng help\r\n```\r\n\r\nCheck version\r\n\r\n```bash\r\nng version\r\n```\r\n\r\nCreate, build, and serve a new, basic Angular project cli command\r\n\r\n```bash\r\nng new my-first-project\r\ncd my-first-project\r\nng serve\r\n```\r\n\r\nGenerating new application\r\n\r\n```bash\r\nng new app-name\r\n```\r\n\r\nCreate new app without installing cli\r\n\r\n```bash\r\nnpm init @angular app-name\r\n\r\nor\r\n\r\nnpx -p @angular/cli ng new app-name\r\n```\r\n\r\nComponent\r\n\r\n```bash\r\nng g c component-name\r\nng generate component component-name\r\n```\r\n\r\nAdding External libraries\r\n\r\n```bash\r\nng add\r\n```\r\n\r\nBuild\r\n\r\n```bash\r\nng build\r\n```\r\n\r\nRunning project\r\n\r\n```bash\r\nng serve\r\n```\r\n\r\nRun project on particular port\r\n\r\n```bash\r\nng serve --port=portname\r\n// example\r\nng serve --port=3000\r\n```\r\n\r\nRun project and open the url in default browser\r\n\r\n```bash\r\nng serve --open\r\n```\r\n\r\nUpdate\r\n\r\n```bash\r\nng update\r\n```\r\n\r\nDirective\r\n\r\n```bash\r\nng generate directive component-name\r\nng g directive component-name\r\n```\r\n\r\nModule\r\n\r\n```bash\r\nng generate module module-name\r\nng g m module-name\r\n```\r\n\r\nService\r\n\r\n```bash\r\nng generate service component-name\r\nng g service component-name\r\n```\r\n\r\nRouting Module\r\n\r\n```bash\r\nng g module module-name --routing\r\nng g m module-name --routing\r\n```\r\n\r\nComponent with module, routing module\r\n\r\n```bash\r\nng generate module component-name --route component-name --module app.module\r\n```\r\n\r\nPipe\r\n\r\n```bash\r\nng g pipe pipe-name\r\n```\r\n\r\nEnum\r\n\r\n```bash\r\nng g enum some-enum\r\n```\r\n\r\nClass\r\n\r\n```bash\r\nng g cl my-class\r\n```\r\n\r\nInterface\r\n\r\n```bash\r\nng g interface my-interface\r\n```\r\n\r\nGuard\r\n\r\n```bash\r\nng g guard guard-name\r\n```\r\n\r\nMultiple Projects in one Angular App\r\n\r\n```bash\r\nng generate application sub-app-name\r\n\r\nng new app-name --create-application=false\r\n```\r\n\r\nGenerate environments\r\n\r\n```bash\r\nng generate environments\r\n```\r\n\r\n## Version compatibility\r\n\r\n| Angular | Node.js | TypeScript | RxJS |\r\n| ------------------ | ------------------------------------ | -------------- | ------------------ |\r\n| 19.1.x | ^18.19.1 \\|\\| ^20.11.1 \\|\\| ^22.0.0 | \u003e=5.5.0 \u003c5.8.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n| 19.0.x | ^18.19.1 \\|\\| ^20.11.1 \\|\\| ^22.0.0 | \u003e=5.5.0 \u003c5.7.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n| 18.1.x \\|\\| 18.2.x | ^18.19.1 \\|\\| ^20.11.1 \\|\\| ^22.0.0 | \u003e=5.4.0 \u003c5.6.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n| 18.0.x | ^18.19.1 \\|\\| ^20.11.1 \\|\\| ^22.0.0 | \u003e=5.4.0 \u003c5.5.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n| 17.3.x | ^18.13.0 \\|\\| ^20.9.0 | \u003e=5.2.0 \u003c5.5.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n| 17.1.x \\|\\| 17.2.x | ^18.13.0 \\|\\| ^20.9.0 | \u003e=5.2.0 \u003c5.4.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n| 17.0.x | ^18.13.0 \\|\\| ^20.9.0 | \u003e=5.2.0 \u003c5.3.0 | ^6.5.3 \\|\\| ^7.4.0 |\r\n\r\nFor more detailed information on each version, you can visit the [Angular Versions](https://angular.dev/reference/versions) page.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Deploying an Angular Application\r\n\r\n| DEPLOYMENT TO | PACKAGE |\r\n|---|---|\r\n| Firebase hosting | ng add @angular/fire |\r\n| Vercel | vercel init angular |\r\n| Netlify | ng add @netlify-builder/deploy |\r\n| GitHub pages | ng add angular-cli-ghpages |\r\n| NPM | ng add ngx-deploy-npm |\r\n| Amazon Cloud S3 | ng add @jefiozie/ngx-aws-deploy |\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Imports\r\n\r\nAngular Core\r\n\r\n```typescript\r\nimport { Component } from '@angular/core'; // Component decorator\r\nimport { NgModule } from '@angular/core'; // NgModule decorator\r\nimport { RouterModule, Routes } from '@angular/router'; // Routing module\r\nimport { FormsModule } from '@angular/forms'; // Forms module\r\nimport { ReactiveFormsModule } from '@angular/forms'; // Reactive forms module\r\nimport { HttpClientModule } from '@angular/common/http'; // HTTP client module\r\nimport { BrowserModule } from '@angular/platform-browser'; // Browser module\r\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Animations module\r\nimport { CommonModule } from '@angular/common'; // Common module\r\nimport { NgModel } from '@angular/forms'; // NgModel directive\r\nimport { NgForm } from '@angular/forms'; // NgForm directive\r\nimport { FormGroup, FormControl, Validators } from '@angular/forms'; // Form group, form control, validators\r\nimport { HttpClient } from '@angular/common/http'; // HTTP client\r\nimport { ActivatedRoute } from '@angular/router'; // Route parameters\r\nimport { Router } from '@angular/router'; // Router service\r\nimport { Title } from '@angular/platform-browser'; // Title service\r\nimport { Meta } from '@angular/platform-browser'; // Meta service\r\nimport { Renderer2 } from '@angular/core'; // Renderer2 service\r\nimport { ElementRef } from '@angular/core'; // ElementRef service\r\nimport { ViewChild } from '@angular/core'; // ViewChild decorator\r\nimport { ViewContainerRef } from '@angular/core'; // ViewContainerRef service\r\nimport { ComponentFactoryResolver } from '@angular/core'; // ComponentFactoryResolver service\r\nimport { ChangeDetectorRef } from '@angular/core'; // ChangeDetectorRef service\r\nimport { Pipe, PipeTransform } from '@angular/core'; // Pipe decorator, PipeTransform interface\r\nimport { Injectable } from '@angular/core'; // Injectable decorator\r\nimport { EventEmitter } from '@angular/core'; // EventEmitter class\r\nimport { Output } from '@angular/core'; // Output decorator\r\nimport { Input } from '@angular/core'; // Input decorator\r\nimport { HostListener } from '@angular/core'; // HostListener decorator\r\nimport { HostBinding } from '@angular/core'; // HostBinding decorator\r\nimport { ContentChild } from '@angular/core'; // ContentChild decorator\r\nimport { ContentChildren } from '@angular/core'; // ContentChildren decorator\r\nimport { QueryList } from '@angular/core'; // QueryList class\r\nimport { AfterContentInit } from '@angular/core'; // AfterContentInit interface\r\nimport { AfterContentChecked } from '@angular/core'; // AfterContentChecked interface\r\nimport { AfterViewInit } from '@angular/core'; // AfterViewInit interface\r\nimport { AfterViewChecked } from '@angular/core'; // AfterViewChecked interface\r\nimport { OnInit } from '@angular/core'; // OnInit interface\r\nimport { OnDestroy } from '@angular/core'; // OnDestroy interface\r\nimport { OnChanges } from '@angular/core'; // OnChanges interface\r\nimport { SimpleChanges } from '@angular/core'; // SimpleChanges class\r\nimport { DoCheck } from '@angular/core'; // DoCheck interface\r\nimport { KeyValueDiffers } from '@angular/core'; // KeyValueDiffers service\r\nimport { KeyValueDiffer } from '@angular/core'; // KeyValueDiffer interface\r\nimport { KeyValueChanges } from '@angular/core'; // KeyValueChanges interface\r\nimport { KeyValueChangeRecord } from '@angular/core'; // KeyValueChangeRecord interface \r\nimport { IterableDiffers } from '@angular/core'; // IterableDiffers service\r\nimport { IterableDiffer } from '@angular/core'; // IterableDiffer interface\r\nimport { IterableChanges } from '@angular/core'; // IterableChanges interface\r\nimport { IterableChangeRecord } from '@angular/core'; // IterableChangeRecord interface\r\nimport { ChangeDetectionStrategy } from '@angular/core'; // ChangeDetectionStrategy enum\r\nimport { ChangeDetectorRef } from '@angular/core'; // ChangeDetectorRef service\r\nimport { NgZone } from '@angular/core'; // NgZone service\r\nimport { ApplicationRef } from '@angular/core'; // ApplicationRef service\r\nimport { ComponentRef } from '@angular/core'; // ComponentRef class\r\nimport { ComponentFactory } from '@angular/core'; // ComponentFactory class\r\nimport { ComponentFactoryResolver } from '@angular/core'; // ComponentFactoryResolver service\r\nimport { ViewContainerRef } from '@angular/core'; // ViewContainerRef service\r\nimport { TemplateRef } from '@angular/core'; // TemplateRef class\r\nimport { EmbeddedViewRef } from '@angular/core'; // EmbeddedViewRef class\r\n```\r\n\r\nAngular Material\r\n\r\n```typescript\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { MatSnackBar } from '@angular/material/snack-bar';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatSort } from '@angular/material/sort';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatToolbarModule } from '@angular/material/toolbar';\r\nimport { MatMenuModule } from '@angular/material/menu';\r\nimport { MatSelectModule } from '@angular/material/select';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport { MatNativeDateModule } from '@angular/material/core';\r\nimport { MatCardModule } from '@angular/material/card';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatRadioModule } from '@angular/material/radio';\r\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\r\nimport { MatTabsModule } from '@angular/material/tabs';\r\nimport { MatSidenavModule } from '@angular/material/sidenav';\r\nimport { MatExpansionModule } from '@angular/material/expansion';\r\nimport { MatGridListModule } from '@angular/material/grid-list';\r\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\r\nimport { MatChipsModule } from '@angular/material/chips';\r\nimport { MatListModule } from '@angular/material/list';\r\nimport { MatStepperModule } from '@angular/material/stepper';\r\nimport { MatBadgeModule } from '@angular/material/badge';\r\nimport { MatBottomSheetModule } from '@angular/material/bottom-sheet';\r\nimport { MatButtonToggleModule } from '@angular/material/button-toggle'; \r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatPaginatorModule } from '@angular/material/paginator';\r\nimport { MatRippleModule } from '@angular/material/core';\r\nimport { MatSliderModule } from '@angular/material/slider';\r\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTreeModule } from '@angular/material/tree';\r\n```\r\n\r\nRxJS\r\n\r\n```typescript\r\nimport { Observable } from 'rxjs/Observable';\r\nimport { Subject } from 'rxjs/Subject';\r\nimport { BehaviorSubject } from 'rxjs/BehaviorSubject';\r\nimport { ReplaySubject } from 'rxjs/ReplaySubject';\r\nimport { AsyncSubject } from 'rxjs/AsyncSubject';\r\nimport { Subscription } from 'rxjs/Subscription';\r\nimport { from } from 'rxjs';\r\nimport { fromEvent } from 'rxjs';\r\nimport { interval } from 'rxjs';\r\nimport { timer } from 'rxjs';\r\nimport { merge } from 'rxjs';\r\nimport { zip } from 'rxjs';\r\nimport { combineLatest } from 'rxjs';\r\nimport { concat } from 'rxjs';\r\nimport { forkJoin } from 'rxjs';\r\nimport { race } from 'rxjs';\r\nimport { map } from 'rxjs/operators';\r\nimport { filter } from 'rxjs/operators';\r\nimport { reduce } from 'rxjs/operators';\r\nimport { tap } from 'rxjs/operators';\r\nimport { catchError } from 'rxjs/operators';\r\nimport { retry } from 'rxjs/operators';\r\nimport { switchMap } from 'rxjs/operators';\r\nimport { take } from 'rxjs/operators';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { distinctUntilChanged } from 'rxjs/operators';\r\nimport { scan } from 'rxjs/operators';\r\nimport { mergeMap } from 'rxjs/operators';\r\nimport { exhaustMap } from 'rxjs/operators';\r\nimport { concatMap } from 'rxjs/operators';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { finalize } from 'rxjs/operators';\r\nimport { share } from 'rxjs/operators';\r\nimport { shareReplay } from 'rxjs/operators';\r\nimport { buffer } from 'rxjs/operators';\r\nimport { bufferCount } from 'rxjs/operators';\r\nimport { bufferTime } from 'rxjs/operators';\r\nimport { bufferToggle } from 'rxjs/operators';\r\nimport { bufferWhen } from 'rxjs/operators';\r\nimport { combineAll } from 'rxjs/operators';\r\nimport { concatAll } from 'rxjs/operators';\r\nimport { count } from 'rxjs/operators';\r\nimport { endWith } from 'rxjs/operators';\r\nimport { every } from 'rxjs/operators';\r\nimport { exhaust } from 'rxjs/operators';\r\nimport { first } from 'rxjs/operators';\r\nimport { groupBy } from 'rxjs/operators';\r\nimport { ignoreElements } from 'rxjs/operators';\r\nimport { isEmpty } from 'rxjs/operators';\r\nimport { last } from 'rxjs/operators';\r\nimport { max } from 'rxjs/operators';\r\nimport { mergeAll } from 'rxjs/operators';\r\nimport { min } from 'rxjs/operators';\r\nimport { pairwise } from 'rxjs/operators';\r\nimport { partition } from 'rxjs/operators';\r\nimport { pluck } from 'rxjs/operators';\r\n```\r\n\r\nFirebase\r\n\r\n```typescript\r\nimport { AngularFireModule } from \"@angular/fire/compat\";\r\nimport { AngularFireAuthModule } from \"@angular/fire/compat/auth\";\r\nimport { AngularFireStorageModule } from '@angular/fire/compat/storage';\r\nimport { AngularFirestoreModule } from '@angular/fire/compat/firestore';\r\nimport { AngularFireDatabaseModule } from '@angular/fire/compat/database';\r\nimport { AngularFireStorage } from '@angular/fire/storage';\r\n\r\nimport { AngularFireModule } from '@angular/fire';\r\nimport { AngularFireAuthModule } from '@angular/fire/auth';\r\nimport { AngularFireDatabaseModule } from '@angular/fire/database';\r\nimport { AngularFireStorageModule } from '@angular/fire/storage';\r\nimport { AngularFirestoreModule } from '@angular/fire/firestore';\r\nimport { AngularFireFunctionsModule } from '@angular/fire/functions';\r\nimport { AngularFireMessagingModule } from '@angular/fire/messaging';\r\nimport { AngularFirePerformanceModule } from '@angular/fire/performance';\r\nimport { AngularFireRemoteConfigModule } from '@angular/fire/remote-config';\r\nimport { AngularFireAnalyticsModule } from '@angular/fire/analytics';\r\nimport { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';\r\n```\r\n\r\n## MVVM\r\n\r\n**MVVM** stands for Model-View-ViewModel. It is a design pattern that separates the user interface (View) from the business logic (Model) using a ViewModel. The ViewModel acts as an intermediary between the View and the Model, providing data binding and event handling.\r\n\r\n## MVC\r\n\r\n**MVC** stands for Model-View-Controller. It is a design pattern that separates the user interface (View) from the business logic (Model) using a Controller. The Controller acts as an intermediary between the View and the Model, handling user input and updating the Model.\r\n\r\n## TypeScript\r\n\r\n**TypeScript** is JavaScript with syntax for types. TypeScript is a superset of JavaScript that compiles to plain JavaScript. It is developed and maintained by Microsoft.\r\n\r\n## Rxjs\r\n\r\n**Reactive Extensions Library for JavaScript** - RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.\r\n\r\n## NgRx\r\n\r\n**NgRx** is a Reactive libraries for Angular. It provides state management, side effects, and route handling. It is inspired by Redux. It is a set of Angular libraries to help manage state at scale in Angular applications.\r\n\r\n## NgXS\r\n\r\n**NgXS** is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations.\r\n\r\n[Back to top⤴️](#table-of-contents)\r\n\r\n## Learn more from GitHub Repositories\r\n\r\n- [Awesomw Angular](https://github.com/PatrickJS/awesome-angular)\r\n- [Angular JumpStart](https://github.com/DanWahlin/Angular-JumpStart)\r\n- [Angular Interview Questions by Sudheerj](https://github.com/sudheerj/angular-interview-questions)\r\n- [Angular Learning Resources](https://github.com/avatsaev/angular-learning-resources)\r\n- [CodAffection](https://github.com/CodAffection)\r\n- [Bezkoder](https://github.com/bezkoder)\r\n- [Angular Interview Questions by Yonet](https://github.com/Yonet/Angular-Interview-Questions)\r\n- [Angular Basics ( v14.x )](https://github.com/learning-zone/angular-basics)\r\n\r\n## Learn more from Websites\r\n\r\n- [Official Documentation](https://angular.io/)\r\n- [Tektutorialshub](https://www.tektutorialshub.com/)\r\n- [W3School](https://www.w3schools.com/)\r\n- [GeeksForGeeks](https://www.geeksforgeeks.org/)\r\n- [DevDocs](https://devdocs.io/)\r\n- [Freecodecamp](https://www.freecodecamp.org/)\r\n- [Javatpoint](https://www.javatpoint.com/)\r\n- [Tutorialspoint](https://www.tutorialspoint.com/index.htm)\r\n- [Udemy](https://www.udemy.com/)\r\n- [YouTube](https://www.youtube.com)\r\n- [Stackoverflow](https://stackoverflow.com)\r\n- [NX Blog](https://blog.nrwl.io/angular/home)\r\n- [Indepthdev](https://indepth.dev/angular)\r\n- [Angular University](https://blog.angular-university.io/)\r\n- [Bezkoder](https://www.bezkoder.com/)\r\n\r\n## Learn more from Books\r\n\r\n- [Angular From Theory To Practice](https://www.amazon.in/gp/product/B01N9S0CZN/ref=as_li_tl?ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=B01N9S0CZN\u0026linkCode=as2\u0026tag=tektutorialsh-21\u0026linkId=80a3add2d10e438ee877f0812a370f80)\r\n- [Angular in Action](https://www.amazon.in/gp/product/1617293318/ref=as_li_tl?ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=1617293318\u0026linkCode=as2\u0026tag=tektutorialsh-21\u0026linkId=03b773dca252208c495a23ff9a7a9658)\r\n- [Ng-Book: The Complete Guide to Angular](https://www.amazon.in/gp/product/1985170280/ref=as_li_tl?ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=1985170280\u0026linkCode=as2\u0026tag=tektutorialsh-21\u0026linkId=61634c765c76ef908e150a0890dee4ab)\r\n- [Pro Angular 6](https://www.amazon.in/gp/product/1484236483/ref=as_li_tl?ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=1484236483\u0026linkCode=as2\u0026tag=tektutorialsh-21\u0026linkId=5782a77503f4cbb8ec775b4f3dff8e2b)\r\n- [Beginning Angular with Typescript](https://www.amazon.in/dp/B01N9ZUHBA/ref=olp-opf-redir?aod=1\u0026ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=B01N9ZUHBA\u0026linkCode=am2\u0026tag=tektutorialsh-21\u0026linkId=904b107f5a59c4150a4c1f414ad3bbe5)\r\n- [Angular 6 for Enterprise-Ready Web Applications](https://www.amazon.in/dp/B078PNWRDN/ref=olp-opf-redir?aod=1\u0026ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=B078PNWRDN\u0026linkCode=am2\u0026tag=tektutorialsh-21\u0026linkId=920065d52a27f89347011de7586867ff)\r\n- [ASP.NET Core 2 and Angular 5](https://www.amazon.in/dp/B0778LXCCQ/ref=olp-opf-redir?aod=1\u0026ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=B0778LXCCQ\u0026linkCode=am2\u0026tag=tektutorialsh-21\u0026linkId=dd160acb0338cf2704adbbf8e4d95126)\r\n- [Angular Up \u0026 Running](https://www.amazon.in/gp/product/9352137426/ref=as_li_tl?ie=UTF8\u0026camp=3638\u0026creative=24630\u0026creativeASIN=9352137426\u0026linkCode=as2\u0026tag=tektutorialsh-21\u0026linkId=1a5a75d4af830585e3f935a6b5c9a083)\r\n- [Codecraft](https://codecraft.tv/courses/angular/)\r\n- [Rangle.io](https://angular-training-guide.rangle.io/)\r\n- [Angular 2 Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/angular2-succinctly)\r\n- [Angular2Book](https://goalkicker.com/Angular2Book/)\r\n- [Learning Angular: A no-nonsense guide to building web applications with Angular 15, 4th Edition](https://a.co/d/epVsJMG)\r\n\r\n## Learn from YouTube Channels\r\n\r\n- [Freecodecamp](https://www.youtube.com/@freecodecamp)\r\n- [Programming With Mosh](https://www.youtube.com/@programmingwithmosh)\r\n- [Angular University](https://www.youtube.com/@AngularUniversity)\r\n- [Traversy Media](https://www.youtube.com/@TraversyMedia)\r\n- [Code With Harry](https://www.youtube.com/@CodeWithHarry)\r\n- [Fireship](https://www.youtube.com/@Fireship)\r\n- [Academind](https://www.youtube.com/@academind)\r\n- [Decoded Frontend](https://www.youtube.com/@DecodedFrontend)\r\n- [Brandon Roberts](https://www.youtube.com/@BrandonRobertsDev)\r\n- [ARC Tutorials](https://www.youtube.com/@ARCTutorials)\r\n- [Edureka](https://www.youtube.com/@edurekaIN)\r\n- [Simplilearn](https://www.youtube.com/@SimplilearnOfficial)\r\n- [Joshua Morony](https://www.youtube.com/@JoshuaMorony)\r\n- [Codevolution](https://www.youtube.com/@Codevolution)\r\n- [Code Step By Step](https://www.youtube.com/@codestepbystep)\r\n- [UX Trendz](https://www.youtube.com/@uxtrendz)\r\n- [Devstackr](https://www.youtube.com/@Devstackr)\r\n- [David Acosta](https://www.youtube.com/@davidacosta4611)\r\n- [Testy Codiez](https://www.youtube.com/@TestyCodiez)\r\n- [CodAffection](https://www.youtube.com/@CodAffection)\r\n- [Techsith](https://www.youtube.com/@techsithtube)\r\n\r\n## Learn More From Blogs Sites\r\n\r\n- [Freecodecamp](https://www.freecodecamp.org/news)\r\n- [Medium](https://medium.com/)\r\n- [Dev.to](https://dev.to/)\r\n- [Hashnode](https://hashnode.com/)\r\n- [Angular Blog](https://blog.angular.io/)\r\n- [Angular In Depth](https://angularindepth.com/)\r\n- [Angular University](https://blog.angular-university.io/)\r\n\r\n## List of Online Editors/Compiler for Angular\r\n\r\n- [Stackblitz](https://stackblitz.com/)\r\n- [CodeSandbox](https://codesandbox.io/)\r\n- [Plunker](https://plnkr.co/)\r\n\r\n## List of Twitter Users to Follow\r\n\r\n- [Mosh](https://twitter.com/moshhamedani)\r\n- [Minko Gechev](https://twitter.com/mgechev)\r\n- [Todd Motto](https://twitter.com/toddmotto)\r\n- [Deborah Kurata](https://twitter.com/DeborahKurata)\r\n- [John Papa](https://twitter.com/John_Papa)\r\n- [Dan Wahlin](https://twitter.com/DanWahlin)\r\n- [Maximilian Schwarzmüller](https://twitter.com/maxedapps)\r\n- [Wes Bos](https://twitter.com/wesbos)\r\n- [Tracy Lee | ladyleet](https://twitter.com/ladyleet)\r\n- [Shai Reznik](https://twitter.com/shai_reznik)\r\n- [Victor Savkin](https://twitter.com/victorsavkin)\r\n- [Stephen Fluin](https://twitter.com/stephenfluin)\r\n- [Juri Strumpflohner](https://twitter.com/juristr)\r\n\r\n## List of LinkedIn Users to Follow\r\n\r\n- [Kevin Kreuzer](https://www.linkedin.com/in/kevin-kreuzer-a63b39121/)\r\n- [Aristeidis Bampakos](https://www.linkedin.com/in/aristeidisbampakos/)\r\n- [Dmytro Mezhenskyi](https://www.linkedin.com/in/dmezhenskyi/)\r\n- [Santosh Yadav](https://www.linkedin.com/in/santoshyadavdev/)\r\n- [Tomas Trajan](https://www.linkedin.com/in/tomastrajan/)\r\n- [Marko Stanimirović](https://www.linkedin.com/in/markostanimirovic/)\r\n- [Teja Gandhamu](https://www.linkedin.com/in/tejagandhamu/)\r\n- [Santosh Yadav](https://www.linkedin.com/in/santoshyadavdev/)\r\n- [Juri Strumpflohner](https://www.linkedin.com/in/juristr/)\r\n- [Minko Gechev](https://www.linkedin.com/in/mgechev/)\r\n- [Todd Motto](https://www.linkedin.com/in/toddmotto/)\r\n- [Deborah Kurata](https://www.linkedin.com/in/deborah-kurata-7b7b5a1/)\r\n\r\n## List of Discord Servers to Join\r\n\r\n- [Angular](https://discord.com/invite/angular)\r\n\r\n## Contributing\r\n\r\nPlease read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## Acknowledgments\r\n\r\n- [Angular](https://angular.io/)\r\n- [Stackblitz](https://stackblitz.com/)\r\n\r\n## Connect with me\r\n\r\n- [Twitter](https://twitter.com/manthan_ank)\r\n- [LinkedIn](https://www.linkedin.com/in/manthanank)\r\n- [Facebook](https://www.facebook.com/manthanank/)\r\n- [Instagram](https://www.instagram.com/manthan_ank/)\r\n- [YouTube](https://www.youtube.com/@manthanank)\r\n- [GitHub](https://github.com/manthanank)\r\n\r\n## Support\r\n\r\nIf you like this learning repository and find it useful, consider buying me a coffee or sponsoring me through the GitHub Sponsor. Your support will help me to continue and bring more exciting projects. Thank you!\r\n\r\n[![Buy Me A Coffee](/public/bmc-button.svg)](https://www.buymeacoffee.com/manthanank)\r\n\r\n[![Sponsor Me](https://img.shields.io/badge/Sponsor-GitHub-green)]([https://](https://github.com/sponsors/manthanank))\r\n\r\n---\r\n\r\nShow your support by 🌟 the repository.\r\n","funding_links":["https://github.com/sponsors/manthanank","https://opencollective.com/manthanank","https://buymeacoffee.com/manthanank","https://patreon.com/manthanank","https://www.buymeacoffee.com/manthanank"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Flearn-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-angular/lists"}