diff --git a/.editorconfig b/.editorconfig
index 59d9a3a..f166060 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
[*.ts]
quote_type = single
+ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
diff --git a/README.md b/README.md
index d921429..36afe0f 100644
--- a/README.md
+++ b/README.md
@@ -1,6160 +1,27 @@
-# Learn Angular
+# LearnAngular
-This 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.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.7.
-
-
-
-
-
-
-
-
-
-
-
-
+## Development server
-## Table of Contents
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-- [Introduction](#introduction)
- - [Features of Angular](#features-of-angular)
- - [Difference between AngularJS vs Angular](#difference-between-angularjs-vs-angular)
- - [Angular vs React](#angular-vs-react)
-- [Roadmap](#roadmap)
-- [Configuration](#configuration)
- - [Prerequisites](#prerequisites)
- - [Installation](#installation)
-- [Components](#components)
- - [Three main building blocks](#three-main-building-blocks)
- - [Component Creation](#component-creation)
- - [Using Angular CLI](#using-angular-cli)
- - [Manual Creation](#manual-creation)
- - [Example](#example)
- - [Scope](#scope)
- - [View Encapsulation](#view-encapsulation)
- - [Emulated View Encapsulation](#emulated-view-encapsulation)
- - [Shadow DOM View Encapsulation](#shadow-dom-view-encapsulation)
- - [None View Encapsulation](#none-view-encapsulation)
- - [Component Communication](#component-communication)
- - [Parent to Child](#parent-to-child)
- - [Child to Parent](#child-to-parent)
-- [Data Binding](#data-binding)
- - [One Way Binding](#one-way-binding)
- - [Two Way Binding](#two-ways-binding)
-- [Directives](#directives)
- - [Structural Directives](#structural-directives)
- - [Attribute Directives](#attribute-directives)
- - [Custom Directives](#custom-directives)
- - [Other Directives](#other-directives)
-- [Pipes](#pipes)
- - [Date Pipe](#date-pipe)
- - [Uppercase Pipe](#uppercase-pipe)
- - [Lowercase Pipe](#lowercase-pipe)
- - [Currency Pipe](#currency-pipe)
- - [Percent Pipe](#percent-pipe)
- - [Slice Pipe](#slice-pipe)
- - [Decimal/number Pipe](#decimalnumber-pipe)
- - [JSON Pipe](#json-pipe)
- - [Async Pipe](#async-pipe)
-- [Decorators](#decorators)
- - [Input](#input)
- - [Output](#output)
- - [HostListener](#hostlistener)
- - [ContentChild & ContentChildren](#contentchild--contentchildren)
- - [ViewChild & ViewChildren](#viewchild--viewchildren)
-- [Life Cycle Hooks](#life-cycle-hooks)
- - [OnChanges](#onchanges)
- - [OnInit](#oninit)
- - [DoCheck](#docheck)
- - [AfterViewInit](#afterviewinit)
- - [AfterViewChecked](#afterviewchecked)
- - [AfterContentInit](#aftercontentinit)
- - [AfterContentChecked](#aftercontentchecked)
- - [OnDestroy](#ondestroy)
-- [Forms](#forms)
- - [Template Driven Forms](#template-driven-forms)
- - [Reactive Forms](#reactive-forms)
-- [Services](#services)
- - [Injectable Decorator](#injectable-decorator)
- - [Dependency Injection](#dependency-injection)
- - [Providers](#providers)
-- [Routing](#routing)
- - [Router Outlet](#router-outlet)
- - [Router Link](#router-link)
- - [Router Link Active](#router-link-active)
- - [Router State](#router-state)
- - [Router Events](#router-events)
- - [Router Guards](#router-guards)
-- [Lazy Loading](#lazy-loading)
-- [HTTP Client](#http-client)
-- [Destroy Ref](#destroy-ref)
-- [Http](#http)
-- [Module](#module)
-- [Router](#router)
-- [Route Parameter](#route-parameters)
-- [Observables](#observables-in-angular)
- - [Creating Observables](#creating-observables)
- - [Subscribing to Observables](#subscribing-to-observables)
- - [Difference between Observables and Promises in Angular](#difference-between-observables-and-promises-in-angular)
-- [Unsubscribe](#unsubscribe-in-angular)
-- [Renderer2](#renderer2)
-- [JIT](#jit)
-- [AOT](#aot)
-- [Deferrable Views](#deferrable-views)
-- [Meta Tags](#meta-tags)
- - [Title Service](#title-service)
- - [Dynamic Title](#dynamic-title)
- - [Meta Service](#meta-service)
-- [Security](#security)
- - [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)
- - [Angular's cross-site scripting security model](#angulars-cross-site-scripting-security-model)
- - [Preventing cross-site scripting (XSS)](#preventing-cross-site-scripting-xss)
- - [Angular's cross-site scripting security model](#angulars-cross-site-scripting-security-model)
- - [Sanitization and security contexts](#sanitization-and-security-contexts)
- - [Sanitization example](#sanitization-example)
- - [Direct use of the DOM APIs and explicit sanitization calls](#direct-use-of-the-dom-apis-and-explicit-sanitization-calls)
- - [Trusting safe values](#trusting-safe-values)
- - [Content security policy](#content-security-policy)
- - [Enforcing Trusted Types](#enforcing-trusted-types)
- - [Use the AOT template compiler](#use-the-aot-template-compiler)
- - [Server-side XSS protection](#server-side-xss-protection)
- - [HTTP-level vulnerabilities](#http-level-vulnerabilities)
- - [Cross-site request forgery](#cross-site-request-forgery)
- - [HttpClient XSRF/CSRF security](#httpclient-xsrfcsrf-security)
- - [Configure custom cookie/header names](#configure-custom-cookieheader-names)
- - [Disabling XSRF protection](#disabling-xsrf-protection)
- - [Cross-site script inclusion (XSSI)](#cross-site-script-inclusion-xssi)
- - [Auditing Angular applications](#auditing-angular-applications)
-- [Standalone Components](#standalone-components)
-- [Angular Signals](#angular-signals)
-- [Angular Animations](#angular-animations)
- - [Installing Angular Animations](#installing-angular-animations)
-- [Angular Universal](#angular-universal)
- - [Creating an Angular Universal application](#creating-an-angular-universal-application)
-- [Bootstrap](#bootstrap)
- - [Installing Bootstrap](#installing-bootstrap)
- - [Importing Bootstrap](#importing-bootstrap)
-- [Angular Material](#angular-material)
- - [Installing Angular Material](#installing-angular-material)
- - [Importing Angular Material](#importing-angular-material)
-- [Tailwind CSS](#tailwind-css)
- - [Installing Tailwind CSS](#installing-tailwind-css)
- - [Importing Tailwind CSS](#importing-tailwind-css)
-- [PrimeNG](#primeng)
- - [Installing PrimeNG](#installing-primeng)
- - [Importing PrimeNG](#importing-primeng)
-- [PWA](#pwa)
- - [Installing PWA](#installing-pwa)
- - [Configuring PWA](#configuring-pwa)
- - [Building PWA](#building-pwa)
- - [Service Worker](#service-worker)
- - [Features of PWA](#features-of-pwa)
-- [CLI Commands](#cli-commands)
-- [Version compatibility](#version-compatibility)
-- [Imports](#imports)
-- [TypeScript](#typescript)
-- [RxJS](#rxjs)
-- [Learn From GitHub Repositories](#learn-more-from-github-repositories)
-- [Learn From Websites](#learn-more-from-websites)
-- [Learn From Books](#learn-more-from-books)
-- [Learn From YouTube Channels](#learn-from-youtube-channels)
-- [Learn More From Blogs Sites](#learn-more-from-blogs-sites)
-- [List of Online Editors/Compiler for Angular](#list-of-online-editorscompiler-for-angular)
-- [List of Twitter Users to Follow](#list-of-twitter-users-to-follow)
-- [List of LinkedIn Users to Follow](#list-of-linkedin-users-to-follow)
-- [List of Discord Servers to Join](#list-of-discord-servers-to-join)
+## Code scaffolding
-## Introduction
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-**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.
+## Build
-### Features of Angular
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-- **Component-Based Architecture**: Reusable, self-contained units of code that define the UI and behavior of a part of the application.
-- **Two-Way Data Binding**: Automatic synchronization of data between the model and the view.
-- **Dependency Injection**: Provides components with the services they need for better modularity and testability.
-- **Routing**: Powerful system for navigation between different views, supporting deep linking, lazy loading, and route guards.
-- **Forms**: Tools for template-driven and reactive forms, based on a model-driven approach.
-- **HTTP Client**: Simple API for making HTTP requests and handling responses.
-- **Observables**: Handles asynchronous operations and event handling.
-- **TypeScript**: Superset of JavaScript with static typing, better tooling, error checking, and code completion.
-- **Performance**: Optimized for performance with virtual DOM, lazy loading, tree shaking, and ahead-of-time compilation.
-- **Mobile Support**: Tools for building responsive, touch-friendly mobile applications, including PWAs.
-- **SEO Friendly**: Tools for server-side rendering, pre-rendering, and meta tags to improve search engine visibility.
-- **Community Support**: Large, active community providing support and sharing knowledge.
+## Running unit tests
-### Difference between AngularJS vs Angular
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-| AngularJS | Angular |
-|-----|-----|
-|Based on MVC Architecture|Based on Components|
-|Uses JavaScript to build the application| Uses TypeScript to build the application|
-|No Mobile Support|Mobile supports|
-|Run on only client-side|Runs on both client-side as well as server-side|
-|CLI not present|CLI present|
-|No SEO Friendly|Seo Friendly|
-|Performance is slow|Performance is fast|
+## Running end-to-end tests
-[Back to top⤴️](#table-of-contents)
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-### Angular vs React
+## Further help
-- **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.
-
-- **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.
-
-**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.
-
-**When to use Angular**: Best for large, complex applications needing integrated tools and scalability.
-
-**When to use React**: Best for small to medium-sized applications needing flexibility and a focus on the UI.
-
-[Back to top⤴️](#table-of-contents)
-
-## SPA
-
-**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.
-
-### Advantages of SPA
-
-- **Faster Load Times**: Loads the initial page once; subsequent interactions update dynamically.
-- **Better User Experience**: No full page reloads, allowing faster navigation and smoother transitions.
-- **Reduced Server Load**: Less server load as only necessary data is fetched.
-- **Improved SEO**: Optimizable for search engines with server-side rendering and meta tags.
-- **Offline Support**: Accessible offline using service workers and caching.
-- **Mobile Support**: Optimized for mobile with responsive design and touch gestures.
-- **Scalability**: Handles many users and interactions with performance optimizations like lazy loading.
-
-[Back to top⤴️](#table-of-contents)
-
-## Roadmap
-
-[https://roadmap.sh/angular](https://roadmap.sh/angular)
-
-## Configuration
-
-### Prerequisites
-
-- Node.js
-- NPM
-- Angular CLI
-
-### Installation
-
-Install the Angular CLI globally:
-
-```bash
-npm install -g @angular/cli
-```
-
-If you have already installed the Angular CLI, you can update it to the latest version using the following command:
-
-```bash
-npm install -g @angular/cli@latest
-```
-
-Check version
-
-```bash
-ng version
-```
-
-Create a new Angular project: (Replace `[PROJECT NAME]` with your project name)
-
-```bash
-# with standalone component
-ng new [PROJECT NAME]
-
-# without standalone component
-ng new [PROJECT NAME] --standalone=false
-```
-
-**Note**: In version v17 and later, the standalone component is default enabled. In version v16 and earlier, the standalone component is disabled by default. You can enable or disable the standalone component using the `--standalone` flag. (In this repository, an example repository is created with the latest version of Angular.)
-
-Navigate to the project directory:
-
-```bash
-cd [PROJECT NAME]
-```
-
-Run the application:
-
-```bash
-ng serve
-```
-
-Open the browser and navigate to `http://localhost:4200/`.
-
-[Back to top⤴️](#table-of-contents)
-
-## Components
-
-Component 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.
-
-### Three main building blocks
-
-There are three main building blocks of an Angular component:
-
-- Template
-- Class
-- Metadata
-
-**Template** - Defines the layout and content of the View.
-
-**Class** - Class provides the data & logic to the View.
-
-**MetaData** - Metadata Provides additional information about the component to the Angular.
-
-### Component metadata properties
-
-There are several properties that can be defined in the component metadata:
-
-- Selector
-- Providers
-- Styles
-- StyleUrls
-- Template
-- TemplateUrl
-
-**Selector** - Defines the element name or CSS selector that identifies the component in the HTML template.
-
-**Providers** - Defines the providers of the component's dependencies.
-
-**styles** - Defines the inline styles for the component.
-
-**styleUrls** - Defines an array of URLs of the stylesheets for the component.
-
-**template** - Defines the HTML template for the component.
-
-**templateUrl** - Defines the URL of the HTML template for the component.
-
-## Component Creation
-
-### Using Angular CLI
-
-```bash
-ng generate component [component-name]
-```
-
-### Manual Creation
-
-**Step 1** - Create a new folder for the component inside the `src/app` folder.
-
-```bash
-src/app/[component-name]
-```
-
-**Step 2** - Create a new TypeScript file for the component inside the new folder.
-
-```bash
-src/app/[component-name]/[component-name].component.ts
-```
-
-**Step 3** - Create a new HTML file for the component inside the new folder.
-
-```bash
-src/app/[component-name]/[component-name].component.html
-```
-
-**Step 4** - Create a new CSS file for the component inside the new folder.
-
-```bash
-src/app/[component-name]/[component-name].component.css
-```
-
-**Step 5** - Import the Component class from the `@angular/core` module.
-
-```typescript
-import { Component } from '@angular/core';
-```
-
-**Step 6** - Decorate the class with the `@Component` decorator.
-
-```typescript
-@Component({
- selector: 'app-[component-name]',
- standalone: true,
- templateUrl: './[component-name].component.html',
- styleUrls: ['./[component-name].component.css']
-})
-```
-
-If you want to create a standalone component, set the `standalone` property to `true`. If 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 later.
-
-**Step 7** - Define the selector, template, and styles for the component.
-
-```text
-selector - The selector for the component.
-templateUrl - The URL of the HTML template for the component.
-styleUrls - An array of URLs of the stylesheets for the component.
-```
-
-**Step 8** - Export the class.
-
-```typescript
-export class [ComponentName]Component {
-}
-```
-
-**Step 9** - Import the component class in the `app.module.ts` file.
-
-```typescript
-import { [ComponentName]Component } from './[component-name]/[component-name].component';
-```
-
-**Step 10** - Add the component to the `declarations` array in the `@NgModule` decorator.
-
-```typescript
-declarations: [
- AppComponent,
- [ComponentName]Component
-]
-```
-
-If you created a standalone component, `app.module.ts` file is not required. You can import the component in the `app.component.ts` file.
-as shown below.
-
-```typescript
-import { [ComponentName]Component } from './[component-name]/[component-name].component';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [[ComponentName]Component],
- templateUrl: './app.component.html',
- styleUrl: './app.component.scss'
-})
-
-export class AppComponent {
- title = 'app';
-}
-```
-
-**Step 11** - Use the component selector in the HTML template.
-
-```typescript
-
-```
-
-**Step 12** - Run the application using the `ng serve` command.
-
-```bash
-ng serve
-```
-
-### Example
-
-**Creating the component files (Version 16 and earlier)** -
-
-```bash
-//test-component.component.ts
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'test-component',
- templateUrl: './component.component.html',
- styleUrls: ['./component.component.css']
-})
-
-export class TestComponent {
-
-}
-```
-
-```html
-
-
Test Component
-```
-
-```css
-/*component.component.css*/
-h1 {
- color: red;
-}
-```
-
-**Creating the component files (Version 17 and later)** -
-
-```bash
-//test-component.component.ts
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-test-component',
- standalone: true,
- templateUrl: './test-component.component.html',
- styleUrls: ['./test-component.component.css']
-})
-
-export class TestComponent {}
-```
-
-You can create a standalone component by setting the `standalone` property to `true`. The standalone component is enabled by default in Angular v17 and later. You can disable the standalone component by setting the `standalone` property to `false` in the `@Component` decorator of the component. If you disable the 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.
-
-```html
-
-
Test Component
-```
-
-```css
-/*test-component.component.css*/
-h1 {
- color: red;
-}
-```
-
-**Importing the component in the app.module.ts file (Version 16 and earlier)** -
-
-```typescript
-//app.module.ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { TestComponent } from './app.component';
-
-@NgModule({
- declarations: [
- AppComponent,
- TestComponent
- ],
- imports: [
- BrowserModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-**Importing the component in the app.module.ts file (Version 17 and later without standalone component)** -
-
-```typescript
-//app.module.ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { TestComponent } from './test-component/test-component.component';
-
-@NgModule({
- declarations: [
- AppComponent,
- TestComponent
- ],
- imports: [
- BrowserModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-In version 17 and later, the standalone component is enabled by default. You can disable the standalone component by setting the `standalone` property to `false`. Inside app folder, `app.config.ts` file is created by default.
-
-```typescript
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
- providers: [
- provideZoneChangeDetection({ eventCoalescing: true }),
- provideRouter(routes),
- ],
-};
-```
-
-You can import the component in the `app.component.ts` file and use the component selector in the HTML template.
-
-```typescript
-//app.component.ts
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { TestComponent } from './test-component/test-component.component';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [TestComponent],
- templateUrl: './app.component.html',
- styleUrl: './app.component.scss'
-})
-export class AppComponent {
- title = 'app';
-}
-```
-
-```html
-
-
-```
-
-**Creating the inline Template & StyleUrls** -
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: '
{{title}} works
',
- styles: ['h1 { font-weight: bold; }']
-})
-export class AppComponent {
- title = 'app';
-}
-```
-
-[Back to top⤴️](#table-of-contents)
-
-## Scope
-
-In Angular, the scope of a variable determines where it can be accessed:
-
-- **Global Scope**: Accessible anywhere in the application.
-- **Local Scope**: Accessible only within a specific function or block.
-- **Component Scope**: Accessible within a component and its child components.
-
-### Global Scope
-
-Accessible from anywhere in the application; defined outside any function or block.
-
-Example :
-
-```typescript
-// Global Scope
-let globalVariable = 'Global Variable';
-
-function testFunction() {
- console.log(globalVariable); // Output: Global Variable
-}
-
-testFunction();
-```
-
-Example in Angular :
-
-```typescript
-import { Component } from '@angular/core';
-
-// Global Scope
-let globalVariable = 'Global Variable';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-
-export class AppComponent {
- title = globalVariable;
-}
-```
-
-```html
-
-
{{ title }}
-```
-
-### Local Scope
-
-Accessible only within the function or block where defined.
-
-Example :
-
-```typescript
-function testFunction() {
- // Local Scope
- let localVariable = 'Local Variable';
- console.log(localVariable); // Output: Local Variable
-}
-
-testFunction();
-console.log(localVariable); // Error: localVariable is not defined
-```
-
-Example in Angular :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-
-export class AppComponent {
- testFunction() {
- // Local Scope
- let localVariable = 'Local Variable';
- console.log(localVariable); // Output: Local Variable
- }
-}
-```
-
-```html
-
-
-```
-
-### Component Scope
-
-Accessible within the component and its children.
-
-Example :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-
-export class AppComponent {
- // Component Scope
- title = 'app';
-}
-```
-
-```html
-
-
{{ title }}
-```
-
-[Back to top⤴️](#table-of-contents)
-
-## View Encapsulation
-
-Controls how styles are applied to components. By default, Angular uses Emulated View Encapsulation, scoping styles to the component.
-
-### Emulated View Encapsulation
-
-Default mode in Angular, emulating shadow DOM to scope styles to the component.
-
-```typescript
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- encapsulation: ViewEncapsulation.Emulated
-})
-export class AppComponent {
- title = 'app';
-}
-```
-
-### Shadow DOM View Encapsulation
-
-Uses native shadow DOM to encapsulate styles within the component, preventing them from affecting other components.
-
-```typescript
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- encapsulation: ViewEncapsulation.ShadowDom
-})
-export class AppComponent {
- title = 'app';
-}
-```
-
-### None View Encapsulation
-
-Disables encapsulation; styles can affect other components.
-
-```typescript
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- encapsulation: ViewEncapsulation.None
-})
-export class AppComponent {
- title = 'app';
-}
-```
-
-[Back to top⤴️](#table-of-contents)
-
-## Component Communication
-
-Passing data between Angular components using Input/Output decorators, EventEmitter, and services.
-
-### Parent to Child
-
-**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.
-
-Example :
-
-```typescript
-import { Component, Input } from '@angular/core';
-
-@Component({
- selector: 'app-child',
- templateUrl: './child.component.html',
- styleUrls: ['./child.component.css']
-})
-
-export class ChildComponent {
- @Input() message: string;
-}
-```
-
-```html
-
-
{{ message }}
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-parent',
- templateUrl: './parent.component.html',
- styleUrls: ['./parent.component.css']
-})
-
-export class ParentComponent {
- message = 'Hello from parent component';
-}
-```
-
-```html
-
-
-```
-
-### Child to Parent
-
-**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.
-
-Example :
-
-```typescript
-import { Component, Output, EventEmitter } from '@angular/core';
-
-@Component({
- selector: 'app-child',
- templateUrl: './child.component.html',
- styleUrls: ['./child.component.css']
-})
-
-export class ChildComponent {
- @Output() messageEvent = new EventEmitter();
-
- sendMessage() {
- this.messageEvent.emit('Hello from child component');
- }
-}
-```
-
-```html
-
-
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-parent',
- templateUrl: './parent.component.html',
- styleUrls: ['./parent.component.css']
-})
-
-export class ParentComponent {
- message: string;
-
- receiveMessage($event) {
- this.message = $event;
- }
-}
-```
-
-```html
-
-
-
{{ message }}
-```
-
-[Back to top⤴️](#table-of-contents)
-
-## Siblings to Siblings Communication
-
-**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.
-
-Example 1 :
-
-```typescript
-import { Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root'
-})
-
-export class DataService {
- message: string;
-
- setMessage(message: string) {
- this.message = message;
- }
-
- getMessage() {
- return this.message;
- }
-}
-```
-
-```typescript
-import { Component } from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
- selector: 'app-sibling1',
- templateUrl: './sibling1.component.html',
- styleUrls: ['./sibling1.component.css']
-})
-
-export class Sibling1Component {
- message: string;
-
- constructor(private dataService: DataService) {}
-
- sendMessage() {
- this.dataService.setMessage('Hello from sibling1 component');
- }
-}
-```
-
-```html
-
-
-```
-
-```typescript
-import { Component } from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
- selector: 'app-sibling2',
- templateUrl: './sibling2.component.html',
- styleUrls: ['./sibling2.component.css']
-})
-
-export class Sibling2Component {
- message: string;
-
- constructor(private dataService: DataService) {}
-
- receiveMessage() {
- this.message = this.dataService.getMessage();
- }
-}
-```
-
-```html
-
-
{{ message }}
-```
-
-Example 2 :
-
-**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.
-
-```typescript
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-
-@Injectable({
- providedIn: 'root'
-})
-
-export class DataService {
- message = new Subject();
-
- setMessage(message: string) {
- this.message.next(message);
- }
-}
-```
-
-```typescript
-import { Component } from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
- selector: 'app-sibling1',
- templateUrl: './sibling1.component.html',
- styleUrls: ['./sibling1.component.css']
-})
-
-export class Sibling1Component {
- message: string;
-
- constructor(private dataService: DataService) {}
-
- sendMessage() {
- this.dataService.setMessage('Hello from sibling1 component');
- }
-}
-```
-
-```html
-
-
-```
-
-```typescript
-import { Component } from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
- selector: 'app-sibling2',
- templateUrl: './sibling2.component.html',
- styleUrls: ['./sibling2.component.css']
-})
-
-export class Sibling2Component {
- message: string;
-
- constructor(private dataService: DataService) {}
-
- ngOnInit() {
- this.dataService.message.subscribe(message => {
- this.message = message;
- });
- }
-}
-```
-
-```html
-
-
{{ message }}
-```
-
-Example 3 :
-
-**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.
-
-```typescript
-import { Component, ViewChild } from '@angular/core';
-import { Sibling2Component } from './sibling2.component';
-
-@Component({
- selector: 'app-sibling1',
- templateUrl: './sibling1.component.html',
- styleUrls: ['./sibling1.component.css']
-})
-
-export class Sibling1Component {
- @ViewChild(Sibling2Component) sibling2: Sibling2Component;
-
- sendMessage() {
- this.sibling2.message = 'Hello from sibling1 component';
- }
-}
-```
-
-```html
-
-
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-sibling2',
- templateUrl: './sibling2.component.html',
- styleUrls: ['./sibling2.component.css']
-})
-
-export class Sibling2Component {
- message: string;
-}
-```
-
-```html
-
-
{{ message }}
-```
-
-[Back to top⤴️](#table-of-contents)
-
-## Data binding
-
-Data 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:
-
-There are two types of data binding in Angular:
-
-- **One-way binding** - This allows for passing data from the component's class to the HTML template or vice-versa.
-
-- **Two-way binding** - This allows for binding a property of an HTML element to a property in the component's class and vice-versa.
-
-### One way binding
-
-One-way binding allows for passing data from the component's class to the HTML template.
-
-There are several ways to achieve one-way binding in Angular, including:
-
-1. From Component to View
-2. From View to Component
-
-**1. From Component to View** - This allows for passing data from the component's class to the HTML template.
-
-There are several ways to achieve one-way binding from the component to the view in Angular, including:
-
-1. Interpolation
-2. Property binding
-3. Class binding
-4. Style binding
-5. Attribute binding
-
-**Interpolation** - This allows for embedding expressions in the HTML template. It is denoted by double curly braces ({{}}).
-
-Example :
-
-```html
-
{{ firstText }} {{ lastText }}
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
-})
-export class AppComponent {
- firstText = 'Interpolation';
- lastText = 'Example';
-}
-```
-
-[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-zu564w?file=src%2Fapp%2Fapp.component.ts)
-
-**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 ([]).
-
-Example :
-
-```html
-
-
-
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
-})
-export class AppComponent {
- title = 'Angular Property Binding Example';
-
- isDisabled = true;
-}
-```
-
-[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-vcpyoq?file=src/app/app.component.ts)
-
-**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 ([]).
-
-Example :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
-})
-export class AppComponent {
- isActive = false;
-
- toggleActive() {
- this.isActive = !this.isActive;
- }
-}
-```
-
-```html
-
This div is active.
-
-```
-
-```css
-.active {
- background-color: yellow;
-}
-```
-
-[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-s1pkwg?file=src/app/app.component.ts)
-
-**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 ([]).
-
-Example :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
-})
-export class AppComponent {
- backgroundColor = 'red';
- textColor = 'white';
-}
-```
-
-```html
-
-
Hello, world!
-
-```
-
-[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-w8nf7f?file=src/app/app.component.ts)
-
-**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 ([]).
-
-Example :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
-})
-export class AppComponent {
- imageUrl = 'https://example.com/image.jpg';
- imageAlt = 'Example image';
- isButtonDisabled = false;
-}
-```
-
-```html
-
-
-```
-
-[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-bhqsgc?file=src/app/app.component.html)
-
-**b. From View to Component** - This allows for passing data from the HTML template to the component's class.
-
-There are several ways to achieve one-way binding from the view to the component in Angular, including:
-
-1. Event binding
-2. ngModel
-
-**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 (()).
-
-Example :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: [ './app.component.css' ]
-})
-export class AppComponent {
- onClick() {
- console.log('Button was clicked');
- }
-}
-```
-
-```html
-
Event Binding Example
-
-```
-
-[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-kxuxsk?file=src/app/app.component.ts)
-
-**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.
-
-Example :
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
-})
-
-export class AppComponent {
- name: string = '';
-}
-```
-
-```html
-
-
Your name is: {{name}}
-```
-
-**Remeber💡** :
-
-The (click) calls the specified function when a user clicks on the given element (in your example, when a user clicks on a row).
-
-The (change) event binds to HTML's onChange event. This event is fired for ``, `