chore: sync content to repo (#10076)

Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com>
2026-09-24 15:00:31 +08:00 · 2026-06-15 13:44:53 +02:00
parent dc651ca9cb
commit a613f04fd0
113 changed files with 188 additions and 186 deletions
@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [@opensource@analogjs/analog](https://github.com/analogjs/analog)
 - [@video@Robin Goetz - AnalogJS - The Vite powered Angular meta-framework](https://www.youtube.com/watch?v=BSgpvP4eAGk)
 - [@video@Full-stack Angular (SSR, file-based routing, + more) with AnalogJS](https://www.youtube.com/watch?v=VSCXOTCJpiI)
- [@video@Is AnalogJS good enough for my blog site?](https://www.youtube.com/watch?v=xTzEDQULo6s)
+- [@video@Is AnalogJS good enough for my blog site?](https://www.youtube.com/watch?v=xTzEDQULo6s)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@What is Angular?](https://angular.dev/overview)
 - [@official@Understanding Angular](https://angular.io/guide/understanding-angular-overview)
- [@article@Getting Started with Angular](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started)
+- [@article@Getting Started with Angular](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started)
@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [@article@Modern Architectures with Angular Part 1: Strategic design with Sheriff and Standalone Components](https://www.angulararchitects.io/en/blog/modern-architectures-with-angular-part-1-strategic-design-with-sheriff-and-standalone-components/)
 - [@article@Optimizing the architecture of large web applications with Angular](https://albertobasalo.medium.com/optimizing-the-architecture-of-large-web-applications-with-angular-79d03b01a92b)
 - [@article@Angular Architecture Concepts and Patterns](https://www.bigscal.com/blogs/frontend/angular-architecture-concepts-and-patterns/)
- [@article@Top 10 Angular Architecture Mistakes](https://angularexperts.io/blog/top-10-angular-architecture-mistakes)
+- [@article@Top 10 Angular Architecture Mistakes](https://angularexperts.io/blog/top-10-angular-architecture-mistakes)
@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [@official@CLI Reference](https://angular.dev/cli)
 - [@official@The Angular CLI](https://angular.dev/tools/cli)
 - [@video@Angular CLI - Setup](https://www.youtube.com/watch?v=mZnzX3J5XKI)
- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
+- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
@@ -5,6 +5,6 @@ Angular's animation system is built on CSS functionality, which means you can an
 Visit the following resources to learn more:

 - [@official@Animation](https://angular.dev/guide/animations)
- [@article@Angular Animations - A Beginner's Guide](https://www.angularminds.com/blog/angular-animations-a-beginners-guide)
 - [@opensource@Angular Animations Explorer](https://github.com/williamjuan027/angular-animations-explorer)
+- [@article@Angular Animations - A Beginner's Guide](https://www.angularminds.com/blog/angular-animations-a-beginners-guide)
 - [@article@In-Depth guide into animations in Angular](https://angularindepth.com/posts/1285/in-depth-guide-into-animations-in-angular)
@@ -2,8 +2,8 @@

 Angular applications require a compilation process before they can run in a browser. The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

-Visit the following resources to learn to more:
+Visit the following resources to learn more:

 - [@official@Ahead-of-time (AOT) compilation](https://angular.dev/tools/cli/aot-compiler)
 - [@opensource@Angular Compiler Output](https://github.com/JeanMeche/angular-compiler-output)
- [@article@Understanding Angular's ahead of time compliation](https://blog.nashtechglobal.com/understanding-angulars-ahead-of-time-aot-compilation/)
+- [@article@Understanding Angular's ahead of time compliation](https://blog.nashtechglobal.com/understanding-angulars-ahead-of-time-aot-compilation/)
@@ -4,9 +4,9 @@ Change the appearance or behavior of DOM elements and Angular components with at

 The most used attribute directives are:

- ngClass
- ngStyle
- ngModel
+*   ngClass
+*   ngStyle
+*   ngModel

 Visit the following resources to learn more:

@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Accessibility Attributes](https://angular.dev/best-practices/a11y#accessibility-attributes)
 - [@article@ARIA HTML](https://web.dev/learn/accessibility/aria-html/)
- [@article@Comprehensive accessibility strategies for Angular apps leveraging aria-label for dynamic content](https://yasikahivin.medium.com/comprehensive-accessibility-strategies-for-angular-apps-leveraging-aria-label-for-dynamic-content-fdf114834317)
+- [@article@Comprehensive accessibility strategies for Angular apps leveraging aria-label for dynamic content](https://yasikahivin.medium.com/comprehensive-accessibility-strategies-for-angular-apps-leveraging-aria-label-for-dynamic-content-fdf114834317)
@@ -1,8 +1,8 @@
 # @case

-If no `@case` matches the `@switch` condition and there is no `@default` block, nothing is shown.  Otherwise, the content inside the `@case` that matches the condition will be displayed.
+If no `@case` matches the `@switch` condition and there is no `@default` block, nothing is shown. Otherwise, the content inside the `@case` that matches the condition will be displayed.

 Visit the following resources to learn more:

- [@official@\@switch](https://angular.dev/guide/templates/control-flow#switch-block---selection)
+- [@official@@switch](https://angular.dev/guide/templates/control-flow#switch-block---selection)
 - [@article@Angular @switch: Complete Guide](https://blog.angular-university.io/angular-switch/)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Runtime Performance Optimization](https://angular.dev/best-practices/runtime-performance)
 - [@official@ChangeDetectionStrategy](https://angular.dev/guide/components/advanced-configuration#changedetectionstrategy)
- [@video@4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ)
+- [@video@4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ)
@@ -2,10 +2,10 @@

 The change-detection strategy to use for this component. When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:

- `ChangeDetectionStrategy.OnPush` sets the strategy to CheckOnce (on demand).
- `ChangeDetectionStrategy.Default` sets the strategy to CheckAlways.
+*   `ChangeDetectionStrategy.OnPush` sets the strategy to CheckOnce (on demand).
+*   `ChangeDetectionStrategy.Default` sets the strategy to CheckAlways.

 Visit the following resources to learn more:

 - [@official@Advanced Component Configuration](https://angular.dev/guide/components/advanced-configuration#changedetectionstrategy)
- [@official@Component - API](https://angular.dev/api/core/Component#changeDetection)
+- [@official@Component - API](https://angular.dev/api/core/Component#changeDetection)
@@ -5,5 +5,5 @@ A number of Angular CLI commands run a complex process on your code, such as bui
 Visit the following resources to learn more:

 - [@official@CLI Builders](https://angular.dev/tools/cli/cli-builder)
- [@video@Angular Builders – Creating Custom Builder from Scratch](https://www.youtube.com/watch?v=QbDkDLnXAZE)
- [@opensource@Angular Builders](https://github.com/just-jeb/angular-builders)
+- [@opensource@Angular Builders](https://github.com/just-jeb/angular-builders)
+- [@video@Angular Builders – Creating Custom Builder from Scratch](https://www.youtube.com/watch?v=QbDkDLnXAZE)
@@ -2,16 +2,16 @@

 Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data. The following are commonly used built-in pipes for data formatting:

- DatePipe: Formats a date value according to locale rules.
- UpperCasePipe: Transforms text to all upper case.
- LowerCasePipe: Transforms text to all lower case.
- CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
- DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
- PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.
- AsyncPipe: Subscribe and unsubscribe to an asynchronous source such as an observable.
- JsonPipe: Display a component object property to the screen as JSON for debugging.
+*   DatePipe: Formats a date value according to locale rules.
+*   UpperCasePipe: Transforms text to all upper case.
+*   LowerCasePipe: Transforms text to all lower case.
+*   CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
+*   DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
+*   PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.
+*   AsyncPipe: Subscribe and unsubscribe to an asynchronous source such as an observable.
+*   JsonPipe: Display a component object property to the screen as JSON for debugging.

 Visit the following resources to learn more:

 - [@official@Pipes](https://angular.dev/guide/pipes)
- [@article@Pipes in Angular](https://medium.com/@aqeelabbas3972/pipes-in-angular-6a871589299d)
+- [@article@Pipes in Angular](https://medium.com/@aqeelabbas3972/pipes-in-angular-6a871589299d)
@@ -2,8 +2,8 @@

 Angular components can communicate with each other using `@Input()` and `@Output()` decorators. These decorators facilitate data exchange between parent and child components.

- **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data.
- **@Output()**: This decorator allows a child component to emit events to a parent component, enabling the parent to respond to changes or actions within the child component.
+*   **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data.
+*   **@Output()**: This decorator allows a child component to emit events to a parent component, enabling the parent to respond to changes or actions within the child component.

 Visit the following resources to learn more:

@@ -4,10 +4,10 @@ Angular lets you animate coordinated sequences, such as an entire grid or list o

 The functions that control complex animation sequences are:

- `query()`: Finds one or more inner HTML elements.
- `stagger()`: Applies a cascading delay to animations for multiple elements.
- `group()`: Runs multiple animation steps in parallel.
- `sequence()`: Runs animation steps one after another.
+*   `query()`: Finds one or more inner HTML elements.
+*   `stagger()`: Applies a cascading delay to animations for multiple elements.
+*   `group()`: Runs multiple animation steps in parallel.
+*   `sequence()`: Runs animation steps one after another.

 Visit the following resources to learn more:

@@ -1,13 +1,12 @@
 # Component Anatomy

-Angular components are the foundational building blocks of Angular applications, designed to encapsulate both the UI and
-the business logic.
+Angular components are the foundational building blocks of Angular applications, designed to encapsulate both the UI and the business logic.

 Every component must have:

- A TypeScript class with behaviors
- An HTML template
- A CSS selector
+*   A TypeScript class with behaviors
+*   An HTML template
+*   A CSS selector

 Visit the following resources to learn more:

@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [@official@Component](https://angular.dev/guide/components)
 - [@official@Basics of Testing Components](https://angular.io/guide/testing-components-basics)
 - [@official@Component Testing Scenarios • Angular](https://angular.dev/guide/testing/components-scenarios)
- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)
+- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)
@@ -5,4 +5,4 @@ With a component template , you can save and reuse component processes and prope
 Visit the following resources to learn more:

 - [@official@Component Testing Scenarios](https://angular.dev/guide/testing/components-scenarios)
- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)
+- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)
@@ -2,14 +2,14 @@

 Components are the main building block for Angular applications. Each component consists of:

- An HTML template that declares what renders on the page
- A TypeScript class that defines the behavior
- A CSS selector that defines how the component is used in a template
- Optionally, CSS styles applied to the template
+*   An HTML template that declares what renders on the page
+*   A TypeScript class that defines the behavior
+*   A CSS selector that defines how the component is used in a template
+*   Optionally, CSS styles applied to the template

 Visit the following resources to learn more:

 - [@official@Anatomy of a Component](https://angular.dev/guide/components)
 - [@official@Composing with Components in Angular](https://angular.dev/essentials/components)
 - [@video@Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU)
- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
+- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
@@ -1,6 +1,6 @@
 # Containers

-Some Angular Material UI components cannot take children, such as an input, so you need to use container elements to customize the UI component.  
+Some Angular Material UI components cannot take children, such as an input, so you need to use container elements to customize the UI component.

 Visit the following resources to learn more:

@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Content Queries - Signal](https://angular.dev/guide/signals/queries#content-queries)
 - [@official@Content Queries](https://angular.dev/guide/components/queries#content-queries)
- [@official@contentChild - API](https://angular.dev/api/core/contentChild)
+- [@official@contentChild - API](https://angular.dev/api/core/contentChild)
@@ -4,4 +4,4 @@ Angular templates support control flow blocks that let you conditionally show, h

 Visit the following resources to learn more:

- [@official@Built-in Control Flow](https://angular.dev/guide/templates/control-flow)
+- [@official@Built-in Control Flow](https://angular.dev/guide/templates/control-flow)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Build your first Angular App](https://angular.dev/tutorials/first-app)
 - [@official@Components](https://angular.dev/essentials/components)
- [@official@Angular CLI - ng generate components](https://angular.dev/guide/components)
+- [@official@Angular CLI - ng generate components](https://angular.dev/guide/components)
@@ -4,4 +4,4 @@ Creating modules in Angular helps organize your application into manageable, coh

 Visit the following resources to learn more:

- [@official@Feature Modules](https://angular.dev/guide/ngmodules/feature-modules)
+- [@official@Feature Modules](https://angular.dev/guide/ngmodules/feature-modules)
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
 - [@official@HttpClientXsrfModule](https://angular.dev/api/common/http/HttpClientXsrfModule)
 - [@article@Prevent Cross-Site Request Forgery (XSRF/CSRF) Attack](https://learn.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-9.0)
 - [@video@Configure the CSRF Protection With Spring Security 6 and Angular](https://www.youtube.com/watch?v=tgjLsEmxcuY)
- [@video@Angular Security - CSRF prevention using Double Submit Cookie](https://www.youtube.com/watch?v=lZfF4MOTeNM)
+- [@video@Angular Security - CSRF prevention using Double Submit Cookie](https://www.youtube.com/watch?v=lZfF4MOTeNM)
@@ -1,6 +1,6 @@
 # Cross-site Script Inclusion

-Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to read data from a JSON API. The attack works on older browsers by overriding built-in JavaScript object constructors, and then including an API URL using a `<script>` tag. Angular's HttpClient library recognizes this convention and automatically strips the string ")]}',\n" from all responses before further parsing.
+Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to read data from a JSON API. The attack works on older browsers by overriding built-in JavaScript object constructors, and then including an API URL using a `<script>` tag. Angular's HttpClient library recognizes this convention and automatically strips the string ")\]}',\\n" from all responses before further parsing.

 Visit the following resources to learn more:

@@ -1,7 +1,6 @@
 # Cross-site Scripting

-Cross-site scripting (XSS) enables attackers to inject malicious code into web pages. Such code can then, for example, steal user and login data, or perform actions that impersonate the user.
-This has been one of the biggest web security vulnerabilities for over a decade. To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template binding, or interpolation, Angular sanitizes and escapes untrusted values.
+Cross-site scripting (XSS) enables attackers to inject malicious code into web pages. Such code can then, for example, steal user and login data, or perform actions that impersonate the user. This has been one of the biggest web security vulnerabilities for over a decade. To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template binding, or interpolation, Angular sanitizes and escapes untrusted values.

 Visit the following resources to learn more:

@@ -7,5 +7,5 @@ From the core concept, Angular directives are categorized into three categories:
 Visit the following resources to learn more:

 - [@official@Built-in directives](https://angular.dev/guide/directives#)
- [@articleDirectives in Angular: A Beginner's Guide](https://medium.com/@drissi.dalanda8/demystifying-directives-in-angular-a-beginners-guide-fdb6e199b80a)
- [@video@Create a custom directive video for Beginners](https://www.youtube.com/watch?v=AoN56g6UAsE)
+- [@article@@articleDirectives in Angular: A Beginner's Guide](https://medium.com/@drissi.dalanda8/demystifying-directives-in-angular-a-beginners-guide-fdb6e199b80a)
+- [@video@Create a custom directive video for Beginners](https://www.youtube.com/watch?v=AoN56g6UAsE)
@@ -5,4 +5,4 @@ Pipes to transform strings, currency amounts, dates, and other data for display.
 Visit the following resources to learn more:

 - [@official@Custom Pipes for New Transforms](https://angular.dev/guide/pipes/transform-data)
- [@video@Create a custom pipe video for Beginners](https://www.youtube.com/watch?v=P2587FN4Y0w)
+- [@video@Create a custom pipe video for Beginners](https://www.youtube.com/watch?v=P2587FN4Y0w)
@@ -2,7 +2,7 @@

 Custom validators in Angular are functions that allow you to define your own validation logic for form controls. They are used when the built-in validators (like `required`, `minLength`, etc.) do not meet your specific validation requirements. A custom validator is a function that returns either `null` if the form control is valid, or an object that represents the validation error if it is invalid. This object typically contains a key-value pair where the key is the error name and the value is a boolean or some details about the error.

-Learn more from the following resources:
+Visit the following resources to learn more:

 - [@official@Defining custom validators](https://angular.dev/guide/forms/form-validation#defining-custom-validators)
- [@video@How to create custom validator in Angular 17](https://youtu.be/3TwmS0Gdg9I?si=1w4EX-HifJ70-CxT)
+- [@video@How to create custom validator in Angular 17](https://youtu.be/3TwmS0Gdg9I?si=1w4EX-HifJ70-CxT)
@@ -4,5 +4,5 @@ The `@default` clause is used to render a template when none of the `@case` bloc

 Visit the following resources to learn more:

- [@official@\@switch](https://angular.dev/api/core/@switch#description)
+- [@official@@switch](https://angular.dev/api/core/@switch#description)
 - [@article@Angular @switch: Complete Guide](https://blog.angular-university.io/angular-switch/)
@@ -4,6 +4,6 @@ A type of block that can be used to defer load the JavaScript for components, di

 Visit the following resources to learn more:

- [@official@\@defer](https://angular.dev/api/core/@defer)
+- [@official@@defer](https://angular.dev/api/core/@defer)
 - [@article@Angular Defer Complete Guide](https://blog.angular-university.io/angular-defer/)
- [@article@How to use Angular's defer block to improve performance](https://angular.love/en/how-to-use-angulars-defer-block-to-improve-performance)
+- [@article@How to use Angular's defer block to improve performance](https://angular.love/en/how-to-use-angulars-defer-block-to-improve-performance)
@@ -6,5 +6,5 @@ Visit the following resources to learn more:

 - [@official@Deferrable Views](https://angular.dev/guide/defer)
 - [@article@Unlocking Performance with Deferrable views](https://medium.com/@kashif_khan/exploring-angular-17-unlocking-performance-with-deferrable-views-580b1977f430)
- [@video@Angular 17 Defer Block](https://www.youtube.com/watch?v=h2rEGoqwr6o)
- [@article@Learn how to unit test deferrable views](https://angular.love/en/learn-how-to-unit-test-the-deferrable-views)
+- [@article@Learn how to unit test deferrable views](https://angular.love/en/learn-how-to-unit-test-the-deferrable-views)
+- [@video@Angular 17 Defer Block](https://www.youtube.com/watch?v=h2rEGoqwr6o)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Understanding Dependency Injection](https://angular.dev/guide/di/dependency-injection)
 - [@official@DI in Action](https://angular.dev/guide/di/di-in-action)
- [@feed@Explore top posts about Dependency Injection](https://app.daily.dev/tags/dependency-injection?ref=roadmapsh)
+- [@feed@Explore top posts about Dependency Injection](https://app.daily.dev/tags/dependency-injection?ref=roadmapsh)
@@ -1,6 +1,6 @@
 # DevTools

-Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.  You can view component trees and change detection cycles.
+Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. You can view component trees and change detection cycles.

 Visit the following resources to learn more:

@@ -7,4 +7,4 @@ SKDirectives are classes that add additional behavior to elements in your Angula
 Visit the following resources to learn more:

 - [@official@Built-in directives](https://angular.dev/guide/directives/)
- [@article@BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives)
+- [@article@BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives)
@@ -5,7 +5,7 @@ In addition to using a component directly in a template, you can also dynamicall
 Visit the following resources to learn more:

 - [@official@Programmatically Rendering Components](https://angular.dev/guide/components/programmatic-rendering)
- [@video@Dynamic Component in Angular (2024)](https://www.youtube.com/watch?v=ncbftt3NWVo)
 - [@article@New Input Binding for NgComponentOutlet](https://medium.com/ngconf/new-input-binding-for-ngcomponentoutlet-cb18a86a739d)
 - [@article@Render dynamic components in Angular using ViewContainerRef](https://dev.to/railsstudent/render-dynamic-components-in-angular-using-viewcontainerref-160h)
+- [@video@Dynamic Component in Angular (2024)](https://www.youtube.com/watch?v=ncbftt3NWVo)
 - [@video@Mastering ViewContainerRef for dynamic component loading in Angular17](https://www.youtube.com/watch?v=Ra4PITCt8m0)
@@ -2,7 +2,7 @@

 Dynamic forms in Angular are a flexible way to create forms where the structure (such as form fields and validation rules) is generated at runtime, rather than being hardcoded. By using Angular's `FormBuilder` and `FormGroup`, you can dynamically add, remove, or modify form controls based on user input, data fetched from a server, or other logic. This approach allows for creating complex forms that can adapt to different user scenarios, reducing the need for multiple form templates and making the codebase more maintainable and scalable.

-Learn more from the following resources:
+Visit the following resources to learn more:

 - [@official@Dynamic Forms Documentation](https://angular.dev/guide/forms/dynamic-forms)
 - [@video@Create a Dynamic Reactive Angular Form with JSON](https://www.youtube.com/watch?v=ByHw_RMjkKM)
@@ -0,0 +1,10 @@
+# Elf
+
+Elf is a reactive immutable state management solution built on top of RxJS. It uses custom RxJS operators to query the state and pure functions to update it. Elf encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for experienced and inexperienced developers alike.
+
+Visit the following resources to learn more:
+
+- [@official@What is Elf?](https://ngneat.github.io/elf/)
+- [@opensource@Elf](https://github.com/ngneat/elf)
+- [@opensource@Elf NG Router Store](https://github.com/ngneat/elf-ng-router-store)
+- [@article@Case Study: Elf](https://medium.com/@gronichomer/case-study-elf-%EF%B8%8F%EF%B8%8F-part-1-fe5e87c31c89)
@@ -4,5 +4,5 @@ With the new control flow syntax, you gain `@else if` conditional blocks, someth

 Visit the following resources to learn more:

- [@official@\@if](https://angular.dev/api/core/@if)
+- [@official@@if](https://angular.dev/api/core/@if)
 - [@article@Angular @if: Complete Guide](https://blog.angular-university.io/angular-if/)
@@ -2,17 +2,15 @@

 An encapsulation policy for the component's styling. Possible values:

- `ViewEncapsulation.Emulated`: Apply modified component styles in order to emulate a native Shadow DOM CSS
-  encapsulation behavior.
- `ViewEncapsulation.None`: Apply component styles globally without any sort of encapsulation.
- `ViewEncapsulation.ShadowDom`: Use the browser's native Shadow DOM API to encapsulate styles.
+*   `ViewEncapsulation.Emulated`: Apply modified component styles in order to emulate a native Shadow DOM CSS encapsulation behavior.
+*   `ViewEncapsulation.None`: Apply component styles globally without any sort of encapsulation.
+*   `ViewEncapsulation.ShadowDom`: Use the browser's native Shadow DOM API to encapsulate styles.

 If not supplied, the value is taken from the CompilerOptions which defaults to `ViewEncapsulation.Emulated`.

-If the policy is `ViewEncapsulation.Emulated` and the component has no styles nor {@link Component#styleUrls styleUrls},
-the policy is automatically switched to `ViewEncapsulation.None`.
+If the policy is `ViewEncapsulation.Emulated` and the component has no styles nor {@link Component#styleUrls styleUrls}, the policy is automatically switched to `ViewEncapsulation.None`.

 Visit the following resources to learn more:

 - [@official@Style Scoping](https://angular.dev/guide/components/styling#style-scoping)
- [@official@Component Encapsulation](https://angular.dev/api/core/Component#encapsulation)
+- [@official@Component Encapsulation](https://angular.dev/api/core/Component#encapsulation)
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
 - [@official@Your First Test with Cypress](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test)
 - [@official@Writing Tests: Introduction](https://nightwatchjs.org/guide/writing-tests/introduction.html)
 - [@official@Getting Started](https://webdriver.io/docs/gettingstarted/)
- [@official@Puppeteer Angular Schematic](https://pptr.dev/guides/ng-schematics/#getting-started)
+- [@official@Puppeteer Angular Schematic](https://pptr.dev/guides/ng-schematics/#getting-started)
@@ -5,5 +5,5 @@ Feature modules are `NgModules` for the purpose of organizing code. With feature
 Visit the following resources to learn more:

 - [@official@Feature Modules](https://angular.dev/guide/ngmodules/feature-modules#how-to-make-a-feature-module)
- [@video@Creating a Feature Module | Understanding Angular Modules](https://www.youtube.com/watch?v=VaPhaexVa1U)
- [@article@Feature module with lazy loading in Angular 15](https://medium.com/@jaydeepvpatil225/feature-module-with-lazy-loading-in-angular-15-53bb8e15d193)
+- [@article@Feature module with lazy loading in Angular 15](https://medium.com/@jaydeepvpatil225/feature-module-with-lazy-loading-in-angular-15-53bb8e15d193)
+- [@video@Creating a Feature Module | Understanding Angular Modules](https://www.youtube.com/watch?v=VaPhaexVa1U)
@@ -4,4 +4,4 @@ The @for block repeatedly renders content of a block for each item in a collecti

 Visit the following resources to learn more:

- [@official@\@for](https://angular.dev/api/core/@for)
+- [@official@@for](https://angular.dev/api/core/@for)
@@ -8,4 +8,4 @@ Visit the following resources to learn more:

 - [@official@Forms in Angular](https://angular.dev/guide/forms)
 - [@video@Angular Forms Tutorial](https://www.youtube.com/watch?v=-bGgjgx3fGs)
- [@video@Building Forms in Angular Apps](https://www.youtube.com/watch?v=hAaoPOx_oIw)
+- [@video@Building Forms in Angular Apps](https://www.youtube.com/watch?v=hAaoPOx_oIw)
@@ -2,12 +2,11 @@

 Use route guards to prevent users from navigating to parts of an application without authorization.

-Angular route guards are interfaces provided by Angular that, when implemented, allow us 
-to control the accessibility of a route based on conditions provided in function implementation of that interface.
+Angular route guards are interfaces provided by Angular that, when implemented, allow us to control the accessibility of a route based on conditions provided in function implementation of that interface.

 Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanDeactivate`, `CanMatch` and `Resolve`.

 Visit the following resources to learn more:

 - [@official@Preventing Unauthorized Access](https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access)
- [@official@Resolve](https://angular.dev/api/router/Resolve)
+- [@official@Resolve](https://angular.dev/api/router/Resolve)
@@ -4,5 +4,5 @@ The @if block conditionally displays its content when its condition expression i

 Visit the following resources to learn more:

- [@official@\@if](https://angular.dev/api/core/@if)
+- [@official@@if](https://angular.dev/api/core/@if)
 - [@video@Narrow Down signal value type within an if statement](https://egghead.io/lessons/angular-narrow-down-angular-s-signal-value-type-within-an-if-statement)
@@ -1,9 +1,8 @@
 # Imports

-The `imports` property specifies the `standalone` component's template dependencies — those directives, components, and
-pipes that can be used within its template.
+The `imports` property specifies the `standalone` component's template dependencies — those directives, components, and pipes that can be used within its template.

 Visit the following resources to learn more:

 - [@official@Importing and Using Components](https://angular.dev/guide/components/importing)
- [@official@Component - API](https://angular.dev/api/core/Component#imports)
+- [@official@Component - API](https://angular.dev/api/core/Component#imports)
@@ -5,4 +5,4 @@
 Visit the following resources to learn more:

 - [@official@inputs](https://angular.dev/guide/components/inputs)
- [@official@outputs](https://angular.dev/guide/components/outputs)
+- [@official@outputs](https://angular.dev/guide/components/outputs)
@@ -1,9 +1,9 @@
 # Inputs as Signals

-Signal inputs allow values to be bound from parent components. Those values are exposed using a Signal and can change during the lifecycle of your component.  Angular supports two variants of inputs: `Optional` and `Required`.
+Signal inputs allow values to be bound from parent components. Those values are exposed using a Signal and can change during the lifecycle of your component. Angular supports two variants of inputs: `Optional` and `Required`.

 Visit the following resources to learn more:

 - [@official@Inputs as Signals](https://angular.dev/guide/signals/inputs)
- [@article@Angular Signal Inputs: Complete Guide to input\(\)](https://blog.angular-university.io/angular-signal-inputs/)
+- [@article@Angular Signal Inputs: Complete Guide to input()](https://blog.angular-university.io/angular-signal-inputs/)
 - [@video@Angular's New Signal Inputs](https://www.youtube.com/watch?v=yjCeaiWXC0U)
@@ -5,7 +5,7 @@ Internationalization, sometimes referenced as i18n, is the process of designing
 Visit the following resources to learn more:

 - [@official@Internationalization](https://angular.dev/guide/i18n)
- [@article@Angular i18n](https://lokalise.com/blog/angular-i18n/)
 - [@opensource@Transloco](https://github.com/jsverse/transloco)
 - [@opensource@Ngx Translate](https://github.com/ngx-translate/core)
+- [@article@Angular i18n](https://lokalise.com/blog/angular-i18n/)
 - [@video@Angular 18 Multi-Language Support](https://www.youtube.com/watch?v=hIz0OglmT0Q)
@@ -5,4 +5,4 @@ Interpolation refers to embedding expressions into marked up text. By default, i
 Visit the following resources to learn more:

 - [@official@Interpolation](https://angular.dev/guide/templates/interpolation)
- [@official@Displaying values with interpolation](https://angular.dev/guide/templates/interpolation)
+- [@official@Displaying values with interpolation](https://angular.dev/guide/templates/interpolation)
@@ -2,9 +2,9 @@

 Angular is a popular open-source front-end web application framework developed by Google. It is written in TypeScript and allows developers to build dynamic, single-page web applications with ease. Angular provides a comprehensive set of features for creating interactive and responsive user interfaces, making it a powerful tool for modern web development.

-Learn more from the following resources:
+Visit the following resources to learn more:

 - [@official@Angular](https://angular.dev/)
 - [@official@Angular Documentation](https://angular.dev/overview)
 - [@official@Angular Playground](https://angular.dev/playground)
- [@official@Angular API Reference](https://angular.dev/api)
+- [@official@Angular API Reference](https://angular.dev/api)
@@ -2,7 +2,7 @@

 The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates (external and in-line). Anytime you open an Angular application for the first time, an installation prompt will occur.

-Visit the following links to learn more:
+Visit the following resources to learn more:

 - [@official@Language Service Docs](https://angular.dev/tools/language-service)
- [@opensource@VS Code NG Language Service](https://github.com/angular/vscode-ng-language-service)
+- [@opensource@VS Code NG Language Service](https://github.com/angular/vscode-ng-language-service)
@@ -5,4 +5,4 @@ Lazy loading is a technique in Angular that allows you to load JavaScript compon
 Visit the following resources to learn more:

 - [@official@Lazy-loading Feature Modules](https://angular.dev/guide/ngmodules/lazy-loading)
- [@video@Angular Tutorial - Lazy Loading](https://www.youtube.com/watch?v=JjIQq9lh-Bw)
+- [@video@Angular Tutorial - Lazy Loading](https://www.youtube.com/watch?v=JjIQq9lh-Bw)
@@ -4,5 +4,5 @@

 Visit the following resources to learn more:

- [@official@\@let](https://angular.dev/api/core/@let)
+- [@official@@let](https://angular.dev/api/core/@let)
 - [@article@Angular's next feature let syntax](https://nhannguyendevjs.medium.com/angulars-next-feature-let-syntax-afba6354112b)
@@ -5,4 +5,4 @@ Use the Angular CLI and the npm package manager to build and publish your librar
 Visit the following resources to learn more:

 - [@official@Libraries](https://angular.dev/tools/libraries/creating-libraries)
- [@official@Angular CLI](https://angular.dev/tools/cli)
+- [@official@Angular CLI](https://angular.dev/tools/cli)
@@ -1,6 +1,6 @@
 # Local Setup

-To install Angular CLI on your local system, you need to install `Node.js`. Angular requires an active LTS or maintenance LTS version of Node. Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser.  Once you have Node installed, you can run `npm install -g @angular/cli` to install the Angular CLI.
+To install Angular CLI on your local system, you need to install `Node.js`. Angular requires an active LTS or maintenance LTS version of Node. Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser. Once you have Node installed, you can run `npm install -g @angular/cli` to install the Angular CLI.

 Visit the following resources to learn more:

@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Add the localize package](https://angular.dev/guide/i18n/add-package)
 - [@video@Learn to Internationalize Your Angular Apps with @angular/localize](https://www.youtube.com/watch?v=5h7HPY1OMfU)
- [@video@Multi-Language Support in Angular: A Guide to Localization and Internationalization](https://www.youtube.com/watch?v=ouI21AyJ9tE)
+- [@video@Multi-Language Support in Angular: A Guide to Localization and Internationalization](https://www.youtube.com/watch?v=ouI21AyJ9tE)
@@ -4,4 +4,4 @@ Metadata in Angular components refers to the configuration information that is u

 Visit the following resources to learn more:

- [@official@Component API](https://angular.dev/api/core/Component)
+- [@official@Component API](https://angular.dev/api/core/Component)
@@ -1,10 +1,10 @@
 # Model Inputs

-Model inputs are a special type of input that enable a component to propagate new values back to another component.  Use model inputs in components that exist to modify a value based on user interaction.
+Model inputs are a special type of input that enable a component to propagate new values back to another component. Use model inputs in components that exist to modify a value based on user interaction.

 Visit the following resources to learn more:

 - [@official@Model Inputs](https://angular.dev/guide/signals/model)
- [@video@Angular's New Model Inputs: Two-way Communication with your Child Components](https://www.youtube.com/watch?v=frXIBKqzTK0)
 - [@article@Angular Model Inputs: Two-way binding inputs with signals](https://www.codemotion.com/magazine/frontend/angular-model-inputs-two-way-binding-inputs-with-signals/)
- [@article@Model Inputs: Reactive two-way binding ](https://dev.to/this-is-angular/model-inputs-reactive-two-way-binding-2538)
+- [@article@Model Inputs: Reactive two-way binding ](https://dev.to/this-is-angular/model-inputs-reactive-two-way-binding-2538)
+- [@video@Angular's New Model Inputs: Two-way Communication with your Child Components](https://www.youtube.com/watch?v=frXIBKqzTK0)
@@ -2,7 +2,7 @@

 Angular's **module architecture** uses **NgModules** to organize applications into cohesive units. These modules group related components, directives, pipes, and services, promoting modular development. Key types include the **root module** (entry point), **feature modules** (specific functionality, often lazily loaded), and **shared modules** (reusable code). This approach significantly enhances code organization, scalability, and maintainability.

-Visit following resources to learn more:
+Visit the following resources to learn more:

 - [@article@Angular Architecture](https://dev.to/digitaldino/angular-architecture-39no)
 - [@article@Mastering Modular Architecture in Angular - Medium](https://medium.com/@sehban.alam/mastering-modular-architecture-in-angular-4cc2632fc964)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Importing and Using Components](https://angular.dev/guide/components/importing)
 - [@official@Introduction to Modules](https://angular.dev/guide/ngmodules)
- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
+- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
@@ -2,9 +2,9 @@

 To deploy an Angular application with multiple locales, follow these steps:

-1. Place different versions of your app in locale-specific directories
-2. Use the HTML `<base>` tag with the `href` attribute to set the base URL for relative links.
-3. Deploy each language version in a different subdirectory. Redirect users to their preferred language based on the `Accept-Language` HTTP header.
+1.  Place different versions of your app in locale-specific directories
+2.  Use the HTML `<base>` tag with the `href` attribute to set the base URL for relative links.
+3.  Deploy each language version in a different subdirectory. Redirect users to their preferred language based on the `Accept-Language` HTTP header.

 Visit the following resources to learn more:

@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [@video@Angular State Management with NgRx](https://www.youtube.com/watch?v=a3_GW3RBqn0)
 - [@video@Angular NgRx Signal Store Crash Course (For NgRx Beginners)](https://www.youtube.com/watch?v=HqxY0JPlh54)
 - [@video@NgRx Best Practices](https://youtu.be/yYiO-kjmLAc?si=7J_JkOdbyocfb5m_)
- [@video@Angular Course with NgRx - Building Angular Project From Scratch](https://www.youtube.com/watch?v=vcfZ0EQpYTA)
+- [@video@Angular Course with NgRx - Building Angular Project From Scratch](https://www.youtube.com/watch?v=vcfZ0EQpYTA)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@What is NGXS?](https://www.ngxs.io/)
 - [@article@Details about NGXS](https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba)
- [@video@Practice of NGXS](https://www.youtube.com/watch?v=SGj11j4hxmg)
+- [@video@Practice of NGXS](https://www.youtube.com/watch?v=SGj11j4hxmg)
@@ -4,11 +4,11 @@ An observable is a function that acts as a wrapper for a data stream. They suppo

 There are 4 stages for a life cycle of an observable.

- Creation
- Subscription
- Execution
- Destruction
+*   Creation
+*   Subscription
+*   Execution
+*   Destruction

 Visit the following resources to learn more:

- [@article@Understanding Observable LifeCycle](https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f)
+- [@article@Understanding Observable LifeCycle](https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f)
@@ -6,4 +6,4 @@ Angular uses the Observer pattern which simply means — Observable objects are

 Visit the following resources to learn more:

- [@article@Angular and Observable](https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282)
+- [@article@Angular and Observable](https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282)
@@ -5,4 +5,4 @@ RxJS operators are crucial functions that enable the declarative composition of
 Visit the following resources to learn more:

 - [@official@List of Creation Operators](https://www.learnrxjs.io/learn-rxjs/operators/creation)
- [@article@Full RxJS Operators Documentation](https://www.learnrxjs.io/learn-rxjs/operators/)
+- [@article@Full RxJS Operators Documentation](https://www.learnrxjs.io/learn-rxjs/operators/)
@@ -5,4 +5,4 @@ In angular parent-child communication is commonly used to share data between two
 Visit the following resources to learn more:

 - [@official@Component Interaction](https://angular.io/guide/component-interaction)
- [@article@Medium - Parent-Child Communication](https://jaspritk.medium.com/parent-child-communication-in-angular-888373e0b69e)
+- [@article@Medium - Parent-Child Communication](https://jaspritk.medium.com/parent-child-communication-in-angular-888373e0b69e)
@@ -2,7 +2,7 @@

 Angular’s performance is enhanced through key strategies such as Deferable Views for improved initial load times, Image Optimization techniques to reduce loading overhead, and mitigation of Zone Pollution to streamline change detection. Additionally, addressing Slow Computations enhances runtime efficiency, while Hydration techniques support faster, more interactive server-side rendered applications.

-Learn more from the following resources:
+Visit the following resources to learn more:

 - [@official@Performance Overview](https://angular.dev/best-practices/runtime-performance)
 - [@article@The Complete Angular Performance Guide](https://danielk.tech/home/complete-angular-performance-guide)
@@ -4,11 +4,9 @@ The pipe operator has a higher precedence than the JavaScript ternary operator.

 You should always use parentheses to be sure Angular evaluates the expression as you intend.

-```
-(condition ? a : b) | pipe
-```
+    (condition ? a : b) | pipe

 Visit the following resources to learn more:

 - [@official@Precedence](https://angular.dev/guide/pipes/precedence)
- [@article@What is the precedence between pipe and ternary operators?](https://iq.js.org/questions/angular/what-is-the-precedence-between-pipe-and-ternary-operators)
+- [@article@What is the precedence between pipe and ternary operators?](https://iq.js.org/questions/angular/what-is-the-precedence-between-pipe-and-ternary-operators)
@@ -5,4 +5,4 @@ Use pipes to transform strings, currency amounts, dates, and other data for disp
 Visit the following resources to learn more:

 - [@official@Understanding Pipes](https://angular.dev/tutorials/learn-angular/22-pipes)
- [@article@BuiltIn Pipes - examples](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)
+- [@article@BuiltIn Pipes - examples](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)
@@ -4,4 +4,4 @@ Property binding helps you set values for properties of HTML elements or directi

 Visit the following resources to learn more:

- [@official@Property Binding](https://angular.dev/guide/templates/property-binding)
+- [@official@Property Binding](https://angular.dev/guide/templates/property-binding)
@@ -5,4 +5,4 @@ Configure the injector of component with a token that maps to a provider of a de
 Visit the following resources to learn more:

 - [@official@Defining dependency providers](https://angular.dev/guide/di/defining-dependency-providers)
- [@official@Component API](https://angular.dev/api/core/Component#providers)
+- [@official@Component API](https://angular.dev/api/core/Component#providers)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@article@throttleTime](https://www.learnrxjs.io/learn-rxjs/operators/filtering/throttletime)
 - [@article@auditTime](https://www.learnrxjs.io/learn-rxjs/operators/filtering/audittime)
- [@article@Blogs and Tutorials on RxJS](https://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and-observables/)
+- [@article@Blogs and Tutorials on RxJS](https://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and-observables/)
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [@official@Reactive Forms - Angular](https://angular.dev/guide/forms/reactive-forms)
 - [@article@How To Use Reactive Forms in Angular](https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction)
 - [@video@Reactive Form in Angular](https://www.youtube.com/watch?v=8k4ctDmVn7w)
- [@feed@Explore top posts about General Programming](https://app.daily.dev/tags/general-programming?ref=roadmapsh)
+- [@feed@Explore top posts about General Programming](https://app.daily.dev/tags/general-programming?ref=roadmapsh)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Router Reference - Router links](https://angular.dev/guide/routing/router-reference#router-links)
 - [@official@Router Link - API](https://angular.dev/api/router/RouterLink)
- [@article@Angular Router: Navigation Using RouterLink, Navigate, or NavigateByUrl](https://www.digitalocean.com/community/tutorials/angular-navigation-routerlink-navigate-navigatebyurl)
+- [@article@Angular Router: Navigation Using RouterLink, Navigate, or NavigateByUrl](https://www.digitalocean.com/community/tutorials/angular-navigation-routerlink-navigate-navigatebyurl)
@@ -7,4 +7,4 @@ Thanks to the router outlet, your app will have multiple views/pages and the app
 Visit the following resources to learn more:

 - [@official@Router Reference - Router Outlet](https://angular.dev/guide/routing/router-reference#router-outlet)
- [@official@Router Outlet - API](https://angular.dev/api/router/RouterOutlet)
+- [@official@Router Outlet - API](https://angular.dev/api/router/RouterOutlet)
@@ -5,4 +5,4 @@ Routing in Angular allows the users to create a single-page application with mul
 Visit the following resources to learn more:

 - [@official@Angular Routing](https://angular.dev/guide/routing)
- [@official@Common Routing Tasks](https://angular.dev/guide/routing/common-router-tasks)
+- [@official@Common Routing Tasks](https://angular.dev/guide/routing/common-router-tasks)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@RxJS Interop](https://angular.dev/guide/signals/rxjs-interop)
 - [@article@Angular Signals RxJS Interop from a Practical example](https://angular.love/en/angular-signals-rxjs-interop-from-a-practical-example)
- [@video@Angular Signals RxJs Interoperability: toObservable() (Guess the Behavior)](https://www.youtube.com/watch?v=cam39UyVbpI)
+- [@video@Angular Signals RxJs Interoperability: toObservable() (Guess the Behavior)](https://www.youtube.com/watch?v=cam39UyVbpI)
@@ -2,11 +2,11 @@

 In a nutshell, the main differences between the Promise and the Observable are as follows:

- The Promise is eager, whereas the Observable is lazy,
- The Promise is always asynchronous, while the Observable can be either asynchronous or synchronous,
- The Promise can provide a single value, whereas the Observable is a stream of values (from 0 to multiple values), you can apply RxJS operators to the Observable to get a new tailored stream.
+*   The Promise is eager, whereas the Observable is lazy,
+*   The Promise is always asynchronous, while the Observable can be either asynchronous or synchronous,
+*   The Promise can provide a single value, whereas the Observable is a stream of values (from 0 to multiple values), you can apply RxJS operators to the Observable to get a new tailored stream.

 Visit the following resources to learn more:

 - [@article@Why RxJS? RxJS vs Promises](https://javascript.plainenglish.io/why-rxjs-rxjs-vs-promises-b28962771d68)
- [@feed@Explore top posts about RxJS](https://app.daily.dev/tags/rxjs?ref=roadmapsh)
+- [@feed@Explore top posts about RxJS](https://app.daily.dev/tags/rxjs?ref=roadmapsh)
@@ -6,4 +6,4 @@ Angular sanitizes untrusted values for HTML and URLs. Sanitizing resource URLs i

 Visit the following resources to learn more:

- [@official@Sanitization and Security Contexts](https://angular.dev/best-practices/security#sanitization-and-security-contexts)
+- [@official@Sanitization and Security Contexts](https://angular.dev/best-practices/security#sanitization-and-security-contexts)
@@ -5,4 +5,4 @@ A schematic is a template-based code generator that supports complex logic. It i
 Visit the following resources to learn more:

 - [@official@Generating Code using Schematics](https://angular.dev/tools/cli/schematics)
- [@article@Angular Blog](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944)
+- [@article@Angular Blog](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944)
@@ -5,4 +5,4 @@ This topic describes Angular's built-in protections against common web-applicati
 Visit the following resources to learn more:

 - [@official@Security](https://angular.dev/best-practices/security)
- [@official@Open Web Application Security Project (OWASP)](https://owasp.org/)
+- [@official@Open Web Application Security Project (OWASP)](https://owasp.org/)
@@ -5,4 +5,4 @@ In Angular, the `selector` metadata is a crucial property defined within the `@C
 Visit the following resources to learn more:

 - [@official@Component Selectors](https://angular.dev/guide/components/selectors)
- [@official@Component - API](https://angular.dev/api/core/Component#selector)
+- [@official@Component - API](https://angular.dev/api/core/Component#selector)
@@ -5,4 +5,4 @@ Services let you define code or functionalities that are then accessible and reu
 Visit the following resources to learn more:

 - [@official@Creating an Injectable Service](https://angular.dev/guide/di/creating-injectable-service)
- [@article@Service for API Calls](https://www.knowledgehut.com/blog/web-development/make-api-calls-angular)
+- [@article@Service for API Calls](https://www.knowledgehut.com/blog/web-development/make-api-calls-angular)
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
 - [@article@Testing-Angular.com](https://testing-angular.com/testing-services/)
 - [@video@Testing the Service which has another service injected through Dependency Injection](https://www.youtube.com/watch?v=ACb8wqwgOV4)
 - [@video@Testing Services which has HttpClient as dependency by using Jasmine Spy](https://www.youtube.com/watch?v=15othucRXcI)
- [@video@Angular Unit Tests with the inject() function](https://www.youtube.com/watch?v=Tvsa4OMUGXs)
+- [@video@Angular Unit Tests with the inject() function](https://www.youtube.com/watch?v=Tvsa4OMUGXs)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Installation](https://angular.dev/installation)
 - [@official@Setting up the local environment and workspace](https://angular.dev/tools/cli/setup-local)
- [@official@Build your first Angular app](https://angular.dev/tutorials/first-app)
+- [@official@Build your first Angular app](https://angular.dev/tutorials/first-app)
@@ -5,5 +5,5 @@ Angular Signals is a system that granularly tracks how and where your state is u
 Visit the following resources to learn more:

 - [@official@Signals](https://angular.dev/guide/signals)
- [@video@Signals Unleashed: The Full Guide](https://www.youtube.com/watch?v=6W6gycuhiN0&t=169s)
- [@article@Angular Signals Complete Guide](https://blog.angular-university.io/angular-signals/)
+- [@article@Angular Signals Complete Guide](https://blog.angular-university.io/angular-signals/)
+- [@video@Signals Unleashed: The Full Guide](https://www.youtube.com/watch?v=6W6gycuhiN0&t=169s)
@@ -4,6 +4,6 @@ SSG (Static Site Generator) helps in building the HTML full website during the p

 Visit the following resources to learn more:

+- [@podcast@Angular Air with Alyssa Nicoll - SSR, SSG, ISR, & SOS](https://www.youtube.com/watch?v=b0pUU7RJbBQ)
 - [@official@Prerendering (SSG)](https://angular.dev/guide/prerendering)
- [@video@Angular 16 Pre Rendering Static Pages - Static Site Generation SSG](https://www.youtube.com/watch?v=vmOWJvm3apA)
- [@podcast@Angular Air with Alyssa Nicoll - SSR, SSG, ISR, & SOS](https://www.youtube.com/watch?v=b0pUU7RJbBQ)
+- [@video@Angular 16 Pre Rendering Static Pages - Static Site Generation SSG](https://www.youtube.com/watch?v=vmOWJvm3apA)
@@ -6,4 +6,4 @@ Visit the following resources to learn more:

 - [@official@Server-side Rendering](https://angular.dev/guide/ssr)
 - [@article@Rendering on the Web](https://web.dev/rendering-on-the-web/)
- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
+- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)
@@ -5,4 +5,4 @@ A standalone component is a component that sets `standalone: true` in its compon
 Visit the following resources to learn more:

 - [@official@Standalone Components](https://angular.dev/guide/components/importing#standalone-components)
- [@official@Component - API](https://angular.dev/api/core/Component#standalone)
+- [@official@Component - API](https://angular.dev/api/core/Component#standalone)
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)
 - [@article@Angular state management made simple with NgRx](https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/)
 - [@article@Angular State Management with NgRx](https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx)
- [@article@State Management and the Facade pattern in Angular](https://thefullstack.engineer/full-stack-development-series-part-10-state-management-and-the-facade-pattern-in-angular)
+- [@article@State Management and the Facade pattern in Angular](https://thefullstack.engineer/full-stack-development-series-part-10-state-management-and-the-facade-pattern-in-angular)
@@ -4,9 +4,9 @@ Structural directives are directives applied to an `<ng-template>` element that

 In Angular, there are three standard structural directives:

- `*ngIf` – conditionally includes a template depending on the value of an expression returned by a Boolean.
- `*ngFor` – makes it simple to iterate over an array.
- `*ngSwitch` – renders each matching view.
+*   `*ngIf` – conditionally includes a template depending on the value of an expression returned by a Boolean.
+*   `*ngFor` – makes it simple to iterate over an array.
+*   `*ngSwitch` – renders each matching view.

 Visit the following resources to learn more:

@@ -5,4 +5,4 @@ This metadata allows developers to apply CSS styles directly to a component, enh
 Visit the following resources to learn more:

 - [@official@Styling Components](https://angular.dev/guide/components/styling)
- [@official@Component Style - API](https://angular.dev/api/core/Component#styles)
+- [@official@Component Style - API](https://angular.dev/api/core/Component#styles)
@@ -4,5 +4,5 @@ The `@switch` blocks displays content selected by one of the cases matching agai

 Visit the following resources to learn more:

- [@official@\@switch](https://angular.dev/guide/templates/control-flow#switch-block---selection)
+- [@official@@switch](https://angular.dev/guide/templates/control-flow#switch-block---selection)
 - [@article@Angular @switch: Complete Guide](https://blog.angular-university.io/angular-switch/)
@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [@official@Building a Template-driven Form](https://angular.dev/guide/forms/template-driven-forms)
 - [@article@Template-Driven Forms](https://codecraft.tv/courses/angular/forms/template-driven/)
 - [@video@Template driven form](https://www.youtube.com/watch?v=whr14XxB8-M)
- [@video@Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs)
+- [@video@Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs)
@@ -4,4 +4,4 @@ Template reference variables help you use data from one part of a template in an

 Visit the following resources to learn more:

- [@official@Reference Variables](https://angular.dev/guide/templates/reference-variables)
+- [@official@Reference Variables](https://angular.dev/guide/templates/reference-variables)
@@ -5,4 +5,4 @@ Template statements are methods or properties that you can use in your HTML to r
 Visit the following resources to learn more:

 - [@official@Template Statements](https://angular.dev/guide/templates/template-statements)
- [@official@Understanding Template Statements](https://angular.dev/guide/templates/template-statements#)
+- [@official@Understanding Template Statements](https://angular.dev/guide/templates/template-statements#)
--- a/Show More
+++ b/Show More