From e4b475cd7893ae76fba2a6adb5d5d77af1df9237 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 7 Jun 2025 20:39:04 +0600 Subject: [PATCH] chore: update roadmap content json (#8742) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com> --- public/roadmap-content/ai-engineer.json | 5 + public/roadmap-content/ai-red-teaming.json | 5 - public/roadmap-content/android.json | 12 +- public/roadmap-content/angular.json | 594 +++++++++++++-------- public/roadmap-content/aspnet-core.json | 10 +- public/roadmap-content/backend.json | 5 + public/roadmap-content/cpp.json | 47 +- public/roadmap-content/cyber-security.json | 4 +- public/roadmap-content/devops.json | 6 +- public/roadmap-content/git-github.json | 2 +- public/roadmap-content/java.json | 5 + public/roadmap-content/javascript.json | 5 - public/roadmap-content/python.json | 210 ++++---- public/roadmap-content/qa.json | 5 + public/roadmap-content/sql.json | 2 +- public/roadmap-content/ux-design.json | 17 +- 16 files changed, 550 insertions(+), 384 deletions(-) diff --git a/public/roadmap-content/ai-engineer.json b/public/roadmap-content/ai-engineer.json index c00da5ca6..27c09d679 100644 --- a/public/roadmap-content/ai-engineer.json +++ b/public/roadmap-content/ai-engineer.json @@ -12,6 +12,11 @@ "title": "AI vs Machine Learning", "url": "https://www.youtube.com/watch?v=4RixMPF4xis", "type": "video" + }, + { + "title": "AI vs Machine Learning vs Deep Learning vs GenAI", + "url": "https://youtu.be/qYNweeDHiyU?si=eRJXjtk8Q-RKQ8Ms", + "type": "video" } ] }, diff --git a/public/roadmap-content/ai-red-teaming.json b/public/roadmap-content/ai-red-teaming.json index 22c40c8d0..5f1cfe560 100644 --- a/public/roadmap-content/ai-red-teaming.json +++ b/public/roadmap-content/ai-red-teaming.json @@ -3,11 +3,6 @@ "title": "AI Security Fundamentals", "description": "This covers the foundational concepts essential for AI Red Teaming, bridging traditional cybersecurity with AI-specific threats. An AI Red Teamer must understand common vulnerabilities in ML models (like evasion or poisoning), security risks in the AI lifecycle (from data collection to deployment), and how AI capabilities can be misused. This knowledge forms the basis for designing effective tests against AI systems.\n\nLearn more from the following resources:", "links": [ - { - "title": "AI Security | Coursera", - "url": "https://www.coursera.org/learn/ai-security", - "type": "course" - }, { "title": "Building Trustworthy AI: Contending with Data Poisoning", "url": "https://nisos.com/research/building-trustworthy-ai/", diff --git a/public/roadmap-content/android.json b/public/roadmap-content/android.json index 91d369436..cc85870c9 100644 --- a/public/roadmap-content/android.json +++ b/public/roadmap-content/android.json @@ -496,16 +496,10 @@ } ] }, - "xIvplWfe-uDr9iHjPT1Mx": { + "recycleview@xIvplWfe-uDr9iHjPT1Mx.md": { "title": "RecycleView", - "description": "RecyclerView is the most commonly used and powerful list management tool in Android development. Witch makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they're needed.\n\nAs the name implies, RecyclerView recycles those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. RecyclerView improves performance and your app's responsiveness, and it reduces power consumption.\n\nLearn more from the following resources:", - "links": [ - { - "title": "Create Dynamic Lists with RecyclerView", - "url": "https://developer.android.com/develop/ui/views/layout/recyclerview", - "type": "article" - } - ] + "description": "", + "links": [] }, "znvZp24L-PcQwkSObtixs": { "title": "TextView", diff --git a/public/roadmap-content/angular.json b/public/roadmap-content/angular.json index f93b4a89e..8b84d742f 100644 --- a/public/roadmap-content/angular.json +++ b/public/roadmap-content/angular.json @@ -1,26 +1,41 @@ { "KDd40JOAvZ8O1mfhTYB3K": { "title": "Introduction to Angular", - "description": "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.\n\nOne of the key features of Angular is its use of components, which are reusable building blocks for creating web applications. Components encapsulate the HTML, CSS, and TypeScript code needed to define a specific part of a web page, making it easier to manage and maintain complex applications. Angular also includes a powerful dependency injection system, which helps manage the dependencies between different parts of an application and promotes code reusability. Additionally, Angular provides tools for routing, form handling, and state management, making it a versatile framework for building a wide range of web applications.\n\nLearn more from the following resources:", + "description": "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.\n\nLearn more from the following resources:", "links": [ { - "title": " Angular website", + "title": "Angular", "url": "https://angular.dev/", "type": "article" + }, + { + "title": "Angular Documentation", + "url": "https://angular.dev/overview", + "type": "article" + }, + { + "title": "Angular Playground", + "url": "https://angular.dev/playground", + "type": "article" + }, + { + "title": "Angular API Reference", + "url": "https://angular.dev/api", + "type": "article" } ] }, "DE3cMpeRYuUPw2ADtfS-3": { "title": "Angular Architecture", - "description": "Angular follows a modular architecture pattern, dividing the application into distinct modules, components, services, and other elements, which enhances code organization and maintainability. The key building blocks include modules, which are containers grouping related components, services, directives, and other elements to ensure proper encapsulation and reusability. Components are the building blocks of Angular applications, representing parts of the user interface with associated logic, consisting of templates, styles, and a class defining behavior. Services encapsulate reusable business logic, data manipulation, and API communication, enabling data and functionality sharing across components. Directives are HTML attributes or elements that extend HTML functionality, allowing reusable behaviors across the application. Lastly, pipes transform data before displaying it in templates, providing convenient ways to format, filter, and sort data.\n\nVisit the following resources to learn more:", + "description": "Angular follows a modular architecture pattern, dividing the application into distinct modules, components, services, and other elements, which enhances code organization and maintainability. The key building blocks include modules, which are containers grouping related components, services, directives, and other elements to ensure proper encapsulation and reusability. Components are the building blocks of Angular applications, representing parts of the user interface with associated logic, consisting of templates, styles, and a class defining behavior. Services encapsulate reusable business logic, data manipulation, and API communication, enabling data and functionality sharing across components.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular coding style guide", + "title": "Angular Coding Style Guide", "url": "https://angular.dev/style-guide", "type": "article" }, { - "title": "The Ultimate Guide to Angular Architecture: Best Practices for efficient coding with Angular Framework", + "title": "The Ultimate Guide to Angular Architecture", "url": "https://angulardive.com/blog/the-ultimate-guide-to-angular-architecture-best-practices-for-efficient-coding-with-angular-framework/", "type": "article" }, @@ -43,17 +58,12 @@ "title": "Top 10 Angular Architecture Mistakes", "url": "https://angularexperts.io/blog/top-10-angular-architecture-mistakes", "type": "article" - }, - { - "title": "Architecting Angular: A Guide to effective project structure", - "url": "https://medium.com/@nile.bits/architecting-angular-a-guide-to-effective-project-structure-9756bae92262", - "type": "article" } ] }, "EbFRcy4s6yzzIApBqU77Y": { "title": "Setting up a New Project", - "description": "Visit the following resources to learn more:", + "description": "Setting up a new Angular project is streamlined by the **Angular CLI**, a command-line interface that automates the initial setup. First, ensure Node.js and npm are installed, then globally install the CLI itself via `npm install -g @angular/cli`. With the CLI in place, navigate to your desired directory and initiate a new project using `ng new your-project-name`, where you'll be prompted to configure options like routing and stylesheet format, with the `--standalone` flag being a common addition for modern projects. Once the project is scaffolded and dependencies are installed, change into your new project directory (`cd your-project-name`) and launch the development server with `ng serve`, making your new Angular application accessible in your browser, typically at `http://localhost:4200/`.\n\nVisit the following resources to learn more:", "links": [ { "title": "Installation", @@ -74,12 +84,22 @@ }, "hpShWwL0M57ZAzqkB4I8t": { "title": "Angular and History", - "description": "Angular is a TypeScript-based open-source front-end web framework developed and maintained by Google.\n\nIt is used for building dynamic, single-page web applications (SPAs). Angular provides comprehensive tools, including dependency injection, data binding, routing, and testing, to create robust and scalable web applications.\n\nVisit the following resources to learn more:", + "description": "Angular is a TypeScript-based open-source front-end web framework developed and maintained by Google. It is used for building dynamic, single-page web applications (SPAs). Angular provides comprehensive tools, including dependency injection, data binding, routing, and testing, to create robust and scalable web applications.\n\nVisit the following resources to learn more:", "links": [ { "title": "What is Angular?", "url": "https://angular.dev/overview", "type": "article" + }, + { + "title": "Understanding Angular", + "url": "https://angular.io/guide/understanding-angular-overview", + "type": "article" + }, + { + "title": "Getting Started with Angular", + "url": "https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started", + "type": "article" } ] }, @@ -88,7 +108,7 @@ "description": "Components are the main building block for Angular applications. Each component consists of:\n\n* An HTML template that declares what renders on the page\n* A TypeScript class that defines the behavior\n* A CSS selector that defines how the component is used in a template\n* Optionally, CSS styles applied to the template\n\nVisit the following resources to learn more:", "links": [ { - "title": "Anatomy of a component", + "title": "Anatomy of a Component", "url": "https://angular.dev/guide/components", "type": "article" }, @@ -114,7 +134,7 @@ "description": "Angular components are the foundational building blocks of Angular applications, designed to encapsulate both the UI and the business logic.\n\nEvery component must have:\n\n* A TypeScript class with behaviors\n* An HTML template\n* A CSS selector\n\nVisit the following resources to learn more:", "links": [ { - "title": "Anatomy of a component", + "title": "Anatomy of a Component", "url": "https://angular.dev/guide/components", "type": "article" } @@ -125,12 +145,12 @@ "description": "Configure the injector of component with a token that maps to a provider of a dependency.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Configuring dependency providers", + "title": "Configuring Dependency Providers", "url": "https://angular.dev/guide/di/dependency-injection-providers", "type": "article" }, { - "title": "Component - API", + "title": "Component API", "url": "https://angular.dev/api/core/Component#providers", "type": "article" } @@ -138,10 +158,10 @@ }, "uYHy2yhtTm6fQkKpYx3lU": { "title": "changeDetection", - "description": "The change-detection strategy to use for this component.\n\nWhen a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:\n\n* `ChangeDetectionStrategy.OnPush` sets the strategy to CheckOnce (on demand).\n* `ChangeDetectionStrategy.Default` sets the strategy to CheckAlways.\n\nVisit the following resources to learn more:", + "description": "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:\n\n* `ChangeDetectionStrategy.OnPush` sets the strategy to CheckOnce (on demand).\n* `ChangeDetectionStrategy.Default` sets the strategy to CheckAlways.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Advanced component configuration", + "title": "Advanced Component Configuration", "url": "https://angular.dev/guide/components/advanced-configuration#changedetectionstrategy", "type": "article" }, @@ -157,12 +177,12 @@ "description": "`template` metadata is a property defined within the `@Component` decorator that specifies the HTML template for the component. It allows you to define the structure and layout of the component's view.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Template syntax", + "title": "Template Syntax", "url": "https://angular.dev/guide/templates", "type": "article" }, { - "title": "Component - API", + "title": "Component Template API", "url": "https://angular.dev/api/core/Component#template", "type": "article" } @@ -173,7 +193,7 @@ "description": "A standalone component is a component that sets `standalone: true` in its component metadata. Standalone components directly import other components, directives, and pipes used in their templates\n\nVisit the following resources to learn more:", "links": [ { - "title": "Standalone components", + "title": "Standalone Components", "url": "https://angular.dev/guide/components/importing#standalone-components", "type": "article" }, @@ -205,12 +225,12 @@ "description": "An encapsulation policy for the component's styling. Possible values:\n\n* `ViewEncapsulation.Emulated`: Apply modified component styles in order to emulate a native Shadow DOM CSS encapsulation behavior.\n* `ViewEncapsulation.None`: Apply component styles globally without any sort of encapsulation.\n* `ViewEncapsulation.ShadowDom`: Use the browser's native Shadow DOM API to encapsulate styles.\n\nIf not supplied, the value is taken from the CompilerOptions which defaults to `ViewEncapsulation.Emulated`.\n\nIf the policy is `ViewEncapsulation.Emulated` and the component has no styles nor {@link Component#styleUrls styleUrls}, the policy is automatically switched to `ViewEncapsulation.None`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Style scoping", + "title": "Style Scoping", "url": "https://angular.dev/guide/components/styling#style-scoping", "type": "article" }, { - "title": "Component - API", + "title": "Component Encapsulation", "url": "https://angular.dev/api/core/Component#encapsulation", "type": "article" } @@ -221,7 +241,7 @@ "description": "In Angular, the `selector` metadata is a crucial property defined within the `@Component` decorator that specifies how the component can be identified and used in HTML templates. It determines the way the component is rendered in the DOM, allowing developers to create reusable and easily identifiable components.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Component selectors", + "title": "Component Selectors", "url": "https://angular.dev/guide/components/selectors", "type": "article" }, @@ -237,12 +257,12 @@ "description": "This metadata allows developers to apply CSS styles directly to a component, enhancing its appearance and ensuring that styles are scoped to that particular component.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Styling components", + "title": "Styling Components", "url": "https://angular.dev/guide/components/styling", "type": "article" }, { - "title": "Component - API", + "title": "Component Style - API", "url": "https://angular.dev/api/core/Component#styles", "type": "article" } @@ -253,7 +273,7 @@ "description": "The `imports` property specifies the `standalone` component's template dependencies — those directives, components, and pipes that can be used within its template.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Importing and using components", + "title": "Importing and Using Components", "url": "https://angular.dev/guide/components/importing", "type": "article" }, @@ -269,7 +289,7 @@ "description": "Metadata in Angular components refers to the configuration information that is used to define and configure the behavior of a component. It is specified using decorators, which are functions that add metadata to classes, properties, and methods.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Component - API", + "title": "Component API", "url": "https://angular.dev/api/core/Component", "type": "article" } @@ -277,20 +297,20 @@ }, "19c7D-fWIJ3vYFT6h8ZfN": { "title": "Communication", - "description": "Angular components can communicate with each other using `@Input()` and `@Output()` decorators. These decorators facilitate data exchange between parent and child components.\n\n* **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data.\n* **@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.\n\nAdditionally, **model inputs** are a special type of input that enable two-way data binding. This means that changes in the child component can be propagated back to the parent component, ensuring synchronization between the two. Model inputs automatically create a corresponding output, typically named by appending “Change” to the input’s name, to facilitate this two-way communication.\n\nTo facilitate communication between unrelated components, it’s most effective to trigger events using `EventEmitter` and have the components listen for these events. This approach ensures a decoupled and flexible architecture, allowing components to interact seamlessly without direct dependencies.\n\nVisit the following resources to learn more:", + "description": "Angular components can communicate with each other using `@Input()` and `@Output()` decorators. These decorators facilitate data exchange between parent and child components.\n\n* **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data.\n* **@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.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website - Inputs", + "title": "Inputs", "url": "https://angular.dev/guide/components/inputs", "type": "article" }, { - "title": "Angular Official Website - Outputs", + "title": "Outputs", "url": "https://angular.dev/guide/components/outputs", "type": "article" }, { - "title": "Angular Official Docs - Model Inputs", + "title": "Model Inputs", "url": "https://angular.dev/guide/signals/model", "type": "article" }, @@ -310,6 +330,11 @@ "title": "Parent-Child Interaction", "description": "In angular parent-child communication is commonly used to share data between two components.\n\nVisit the following resources to learn more:", "links": [ + { + "title": "Component Interaction", + "url": "https://angular.io/guide/component-interaction", + "type": "article" + }, { "title": "Medium - Parent-Child Communication", "url": "https://jaspritk.medium.com/parent-child-communication-in-angular-888373e0b69e", @@ -348,12 +373,12 @@ "description": "Content queries retrieve results from the elements in the component's content— the elements nested inside the component in the template where it's used.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Content queries - signal", + "title": "Content Queries - Signal", "url": "https://angular.dev/guide/signals/queries#content-queries", "type": "article" }, { - "title": "Content queries", + "title": "Content Queries", "url": "https://angular.dev/guide/components/queries#content-queries", "type": "article" }, @@ -366,7 +391,7 @@ }, "nCpfj_35ZvW-NTygg06XZ": { "title": "Component Lifecycle", - "description": "A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution.\n\nYour application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances.\n\nThe following life cycle hooks of angular are :\n\n`OnChanges` , `OnInit` , `DoCheck` , `OnDestroy` , `AfterContentInit` , `AfterContentChecked` , `AfterViewInit` , `AfterViewChecked`\n\nVisit the following resources to learn more:", + "description": "A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution.\n\nVisit the following resources to learn more:", "links": [ { "title": "Component Lifecycle", @@ -374,7 +399,7 @@ "type": "article" }, { - "title": "The life cycle hooks of angular - Blog ", + "title": "The Life Cycle Hooks of Angular", "url": "https://blog.logrocket.com/angular-lifecycle-hooks/", "type": "article" }, @@ -395,7 +420,7 @@ "description": "In addition to using a component directly in a template, you can also dynamically render components. There are two main ways to dynamically render a component: in a template with `NgComponentOutlet`, or in your TypeScript code with `ViewContainerRef`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Programmatically rendering components", + "title": "Programmatically Rendering Components", "url": "https://angular.dev/guide/components/programmatic-rendering", "type": "article" }, @@ -426,7 +451,7 @@ "description": "Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Importing and using components", + "title": "Importing and Using Components", "url": "https://angular.dev/guide/components/importing", "type": "article" }, @@ -444,12 +469,17 @@ }, "BCq5sgWQLiw0f7u7ZSAd2": { "title": "Module Architecture", - "description": "Angular’s module architecture organizes an application into cohesive units called NgModules, each defined by the @NgModule decorator. These modules group related components, directives, pipes, and services to encapsulate functionality and promote modular development. The root module (AppModule) is the entry point, bootstrapping the application and importing essential modules like BrowserModule. Feature modules encapsulate specific functionalities and can be eagerly or lazily loaded to improve performance and manageability. Shared modules group reusable components and services to prevent code duplication. The @NgModule metadata includes properties like imports, declarations, exports, providers, and bootstrap, which help manage dependencies, declarations, visibility, service providers, and the root component. This modular approach enhances code organization, scalability, and maintainability in Angular applications.\n\nVisit following resources to learn more:", + "description": "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.\n\nVisit following resources to learn more:", "links": [ { "title": "Angular Architecture", "url": "https://dev.to/digitaldino/angular-architecture-39no", "type": "article" + }, + { + "title": "Mastering Modular Architecture in Angular - Medium", + "url": "https://medium.com/@sehban.alam/mastering-modular-architecture-in-angular-4cc2632fc964", + "type": "article" } ] }, @@ -458,7 +488,7 @@ "description": "You can either use Angular CLI to create the Angular components or create it manually.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Build your first Angular app", + "title": "Build your first Angular App", "url": "https://angular.dev/tutorials/first-app", "type": "article" }, @@ -479,7 +509,7 @@ "description": "Creating modules in Angular helps organize your application into manageable, cohesive units. Each module can encapsulate related components, directives, pipes, and services. Here's a detailed guide on how to create and use modules in Angular.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs (Feature Modules)", + "title": "Feature Modules", "url": "https://angular.dev/guide/ngmodules/feature-modules", "type": "article" } @@ -490,7 +520,7 @@ "description": "Feature modules are `NgModules` for the purpose of organizing code. With feature modules, you can keep code related to a specific functionality or feature separate from other code. Delineating areas of your application helps with collaboration between developers and teams, separating directives, and managing the size of the root module.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Feature Modules", + "title": "Feature Modules", "url": "https://angular.dev/guide/ngmodules/feature-modules#how-to-make-a-feature-module", "type": "article" }, @@ -511,7 +541,7 @@ "description": "By default, NgModules are eagerly loaded. This means that as soon as the application loads, so do all the NgModules, whether they are immediately necessary or not. For large applications with lots of routes, consider lazy loading —a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Lazy Loading", + "title": "Lazy Loading", "url": "https://angular.dev/guide/ngmodules/lazy-loading", "type": "article" }, @@ -532,7 +562,7 @@ "description": "A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Providing dependencies in modules", + "title": "Providing Dependencies in Modules", "url": "https://angular.dev/guide/ngmodules/providers", "type": "article" }, @@ -569,7 +599,7 @@ "description": "Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website", + "title": "Interpolation", "url": "https://angular.dev/guide/templates/interpolation", "type": "article" }, @@ -585,7 +615,7 @@ "description": "Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()` which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website", + "title": "Template Statements", "url": "https://angular.dev/guide/templates/template-statements", "type": "article" }, @@ -601,7 +631,7 @@ "description": "In an Angular template, a binding creates a live connection between view and the model and keeps them both in sync.\n\n* **property**: helps you set values for properties of HTML elements or directives.\n* **attributes**: helps you set values for attributes of HTML elements directly.\n* **event**: lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.\n* **data**: It's a combination of property and event binding and helps you share data between components.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website", + "title": "Binding", "url": "https://angular.dev/guide/templates/binding", "type": "article" } @@ -612,7 +642,7 @@ "description": "In an Angular template, a binding creates a live connection between a part of the UI created from a template (a DOM element, directive, or component) and the model (the component instance to which the template belongs). This connection can be used to synchronize the view with the model, to notify the model when an event or user action takes place in the view, or both. Angular's Change Detection algorithm is responsible for keeping the view and the model in sync. Bindings always have two parts: a target which will receive the bound value, and a template expression which produces a value from the model.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Understand Binding", + "title": "Understand Binding", "url": "https://angular.dev/guide/templates/binding", "type": "article" }, @@ -628,7 +658,7 @@ "description": "Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website", + "title": "Property Binding", "url": "https://angular.dev/guide/templates/property-binding", "type": "article" } @@ -639,7 +669,7 @@ "description": "Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Attribute Binding", + "title": "Attribute Binding", "url": "https://angular.dev/guide/templates/attribute-binding", "type": "article" }, @@ -655,9 +685,14 @@ "description": "Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Event Binding", + "title": "Event Binding", "url": "https://angular.dev/guide/templates/event-binding", "type": "article" + }, + { + "title": "Event Handling in Angular", + "url": "https://medium.com/@theriyasharma24/event-handling-in-angular-a5854a61b4a5", + "type": "article" } ] }, @@ -666,7 +701,7 @@ "description": "Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components. Angular's two-way binding syntax is a combination of square brackets and parentheses, `[()]`, commonly known as `banana in a box`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Two-way binding", + "title": "Two-way binding", "url": "https://angular.dev/guide/templates/two-way-binding", "type": "article" }, @@ -682,7 +717,7 @@ "description": "Angular templates support control flow blocks that let you conditionally show, hide, and repeat elements.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Built-in control flow", + "title": "Built-in Control Flow", "url": "https://angular.dev/guide/templates/control-flow", "type": "article" } @@ -693,12 +728,12 @@ "description": "`@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website - inputs", + "title": "inputs", "url": "https://angular.dev/guide/components/inputs", "type": "article" }, { - "title": "Angular Official Website - outputs", + "title": "outputs", "url": "https://angular.dev/guide/components/outputs", "type": "article" } @@ -709,7 +744,7 @@ "description": "Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Website", + "title": "Reference Variables", "url": "https://angular.dev/guide/templates/reference-variables", "type": "article" } @@ -720,7 +755,7 @@ "description": "In Angular, a _template_ is a chunk of HTML. Use special syntax within a template to build on many of Angular's features. Extend the HTML vocabulary of your applications with special Angular syntax in your templates. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Template Syntax", + "title": "Template Syntax", "url": "https://angular.dev/guide/templates", "type": "article" }, @@ -741,7 +776,7 @@ "description": "The @if block conditionally displays its content when its condition expression is truthy. Content is added and removed from the DOM based on the evaluation of conditional expressions in the @if and @else blocks.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @if", + "title": "@if", "url": "https://angular.dev/api/core/@if", "type": "article" }, @@ -758,7 +793,7 @@ "links": [ { "title": "Angular Official Docs - @else block", - "url": "https://angular.dev/essentials/conditionals-and-loops#else-block", + "url": "https://angular.dev/guide/templates/control-flow#conditionally-display-content-with-if-else-if-and-else", "type": "article" }, { @@ -773,7 +808,7 @@ "description": "With the new control flow syntax, you gain `@else if` conditional blocks, something that is not possible with `@ngIf`. This addition makes the control flow syntax close to what we would write with just plain JavaScript.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @if", + "title": "@if", "url": "https://angular.dev/api/core/@if", "type": "article" }, @@ -789,7 +824,7 @@ "description": "The @for block repeatedly renders content of a block for each item in a collection.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @for", + "title": "@for", "url": "https://angular.dev/api/core/@for", "type": "article" } @@ -800,7 +835,7 @@ "description": "The `@switch` blocks displays content selected by one of the cases matching against the conditional expression. The value of the conditional expression is compared to the case expression using the `===` operator. `@switch` does not have fallthrough, so you do not need an equivalent to a break or return statement.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @switch", + "title": "@switch", "url": "https://angular.dev/guide/templates/control-flow#switch-block---selection", "type": "article" }, @@ -816,7 +851,7 @@ "description": "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.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @switch", + "title": "@switch", "url": "https://angular.dev/guide/templates/control-flow#switch-block---selection", "type": "article" }, @@ -832,8 +867,8 @@ "description": "The `@default` clause is used to render a template when none of the `@case` blocks matches the value of the `@switch` conditional. `@default` is optional and can be omitted.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @switch", - "url": "https://angular.dev/guide/templates/control-flow#switch-block---selection", + "title": "@switch", + "url": "https://angular.dev/api/core/@switch#description", "type": "article" }, { @@ -848,7 +883,7 @@ "description": "@let allows you to define a local variable and re-use it across the template.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @let", + "title": "@let", "url": "https://angular.dev/api/core/@let", "type": "article" }, @@ -864,7 +899,7 @@ "description": "A type of block that can be used to defer load the JavaScript for components, directives and pipes used inside a component template.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - @defer", + "title": "@defer", "url": "https://angular.dev/api/core/@defer", "type": "article" }, @@ -882,7 +917,7 @@ }, "j99WQxuTzGeBBVoReDp_y": { "title": "Pipes", - "description": "Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are\n\n`DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`\n\nVisit the following resources to learn more:", + "description": "Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are `DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`\n\nVisit the following resources to learn more:", "links": [ { "title": "Understanding Pipes", @@ -901,7 +936,7 @@ "description": "Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event\n\nVisit the following resources to learn more:", "links": [ { - "title": "Runtime performance optimization", + "title": "Runtime Performance Optimization", "url": "https://angular.dev/best-practices/runtime-performance", "type": "article" }, @@ -922,7 +957,7 @@ "description": "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:\n\n* DatePipe: Formats a date value according to locale rules.\n* UpperCasePipe: Transforms text to all upper case.\n* LowerCasePipe: Transforms text to all lower case.\n* CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.\n* DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.\n* PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.\n* AsyncPipe: Subscribe and unsubscribe to an asynchronous source such as an observable.\n* JsonPipe: Display a component object property to the screen as JSON for debugging.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Pipes", + "title": "Pipes", "url": "https://angular.dev/guide/pipes", "type": "article" }, @@ -954,7 +989,7 @@ "description": "Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Custom pipes for new transforms", + "title": "Custom Pipes for New Transforms", "url": "https://angular.dev/guide/pipes/transform-data", "type": "article" }, @@ -986,7 +1021,7 @@ "description": "Structural directives are directives applied to an `` element that conditionally or repeatedly renders the content of that ``. If you just wrap elements in an `` without applying a structural directive, those elements will not be rendered.\n\nIn Angular, there are three standard structural directives:\n\n* `*ngIf` – conditionally includes a template depending on the value of an expression returned by a Boolean.\n* `*ngFor` – makes it simple to iterate over an array.\n* `*ngSwitch` – renders each matching view.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Structural Directives", + "title": "Structural Directives", "url": "https://angular.dev/guide/directives/structural-directives", "type": "article" }, @@ -1007,7 +1042,7 @@ "description": "Change the appearance or behavior of DOM elements and Angular components with attribute directives.\n\nThe most used attribute directives are:\n\n* ngClass\n* ngStyle\n* ngModel\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Attribute Directives", + "title": "Attribute Directives", "url": "https://angular.dev/guide/directives/attribute-directives", "type": "article" }, @@ -1022,6 +1057,16 @@ "title": "Custom Directives", "description": "Directives are the functions that will execute whenever the Angular compiler finds them. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.\n\nFrom the core concept, Angular directives are categorized into three categories: Attribute Directives, Structural Directives, and Component Directives.\n\nVisit the following resources to learn more:", "links": [ + { + "title": "Built-in directives", + "url": "https://angular.dev/guide/directives#", + "type": "article" + }, + { + "title": "@articleDirectives in Angular: A Beginner's Guide", + "url": "https://medium.com/@drissi.dalanda8/demystifying-directives-in-angular-a-beginners-guide-fdb6e199b80a", + "type": "article" + }, { "title": "Create a custom directive video for Beginners", "url": "https://www.youtube.com/watch?v=AoN56g6UAsE", @@ -1047,12 +1092,17 @@ }, "dbAS-hN1hoCsNJhkxXcGq": { "title": "Configuration", - "description": "The configuration of routes in an Angular application involves defining route mappings in an array and providing these routes to the Angular router.\n\n### Example routes:\n\n const appRoutes: Routes = [\n { path: 'custom-path', component: CustomComponet },\n { path: 'custom-path/:id', component: CustomDetailComponet, data: { title: 'Details component' } },\n { path: '', redirectTo: '/heroes', pathMatch: 'full'},\n { path: '**', component: PageNotFoundComponent }\n ];\n \n\n* `'custom-path'`: defining a new url route.\n* `'custom-path/:id'` defining _**id**_ parameter.\n* `''` (empty path): instantiate a component without the need for defining a new url route.\n* `'**'`: for undefined paths.\n* The `data` property in the second route is a place to store arbitrary data associated with this specific route.\n\nVisit the following resources to learn more:", + "description": "The configuration of routes in an Angular application involves defining route mappings in an array and providing these routes to the Angular router.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Router reference - Configuration", + "title": "Router Reference - Configuration", "url": "https://angular.dev/guide/routing/router-reference#configuration", "type": "article" + }, + { + "title": "Routing Overview", + "url": "https://angular.dev/guide/routing", + "type": "article" } ] }, @@ -1061,7 +1111,7 @@ "description": "Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Lazy-loading feature modules", + "title": "Lazy-loading Feature Modules", "url": "https://angular.dev/guide/ngmodules/lazy-loading", "type": "article" }, @@ -1077,12 +1127,12 @@ "description": "The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted.\n\nThanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Any element, you add to the shell will be rendered in each view, only the part marked by the router outlet will be changed between views.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Router reference - Router outlet", + "title": "Router Reference - Router Outlet", "url": "https://angular.dev/guide/routing/router-reference#router-outlet", "type": "article" }, { - "title": "Router outlet - API", + "title": "Router Outlet - API", "url": "https://angular.dev/api/router/RouterOutlet", "type": "article" } @@ -1093,12 +1143,12 @@ "description": "In Angular, routerLink when applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more `` locations on the page.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Router reference - Router links", + "title": "Router Reference - Router links", "url": "https://angular.dev/guide/routing/router-reference#router-links", "type": "article" }, { - "title": "Router link - API", + "title": "Router Link - API", "url": "https://angular.dev/api/router/RouterLink", "type": "article" }, @@ -1114,12 +1164,12 @@ "description": "The Angular Router raises events when it navigates from one route to another route. It raises several events such as `NavigationStart`, `NavigationEnd`, `NavigationCancel`, `NavigationError`, `ResolveStart`, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are route change start (NavigationStart) and route change end (NavigationEnd).\n\nVisit the following resources to learn more:", "links": [ { - "title": "Router reference - Router events", + "title": "Router Reference - Router events", "url": "https://angular.dev/guide/routing/router-reference#router-events", "type": "article" }, { - "title": "Router event - API", + "title": "Router Event - API", "url": "https://angular.dev/api/router/RouterEvent", "type": "article" }, @@ -1135,7 +1185,7 @@ "description": "Use route guards to prevent users from navigating to parts of an application without authorization.\n\nAngular 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.\n\nSome types of angular guards are `CanActivate`, `CanActivateChild`, `CanDeactivate`, `CanMatch` and `Resolve`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Preventing unauthorized access", + "title": "Preventing Unauthorized Access", "url": "https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access", "type": "article" }, @@ -1151,7 +1201,7 @@ "description": "Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Creating an injectable service", + "title": "Creating an Injectable Service", "url": "https://angular.dev/guide/di/creating-injectable-service", "type": "article" }, @@ -1209,7 +1259,7 @@ "description": "Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Reactive forms - Angular", + "title": "Reactive Forms - Angular", "url": "https://angular.dev/guide/forms/reactive-forms", "type": "article" }, @@ -1235,7 +1285,7 @@ "description": "Since Angular 14, reactive forms are strictly typed by default. You don't have to define extra custom types or add a ton of type annotations to your form declarations to benefit from this extra type safety, as Angular will infer types from the default value of a form control. Non-typed forms are still supported. To use them, you must import the `Untyped` symbols from `@angular/forms`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Typed Forms", + "title": "Typed Forms", "url": "https://angular.dev/guide/forms/typed-forms", "type": "article" }, @@ -1245,7 +1295,7 @@ "type": "article" }, { - "title": "Getting started with typed reactive forms in Angular", + "title": "Getting started with Typed Reactive Forms in Angular", "url": "https://www.youtube.com/watch?v=mT3UR0TdDnU", "type": "video" }, @@ -1266,7 +1316,7 @@ "description": "A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application.\n\nIt uses two-way data-binding (ngModel) to create and handle the form components.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Building a template-driven form", + "title": "Building a Template-driven Form", "url": "https://angular.dev/guide/forms/template-driven-forms", "type": "article" }, @@ -1324,7 +1374,7 @@ "description": "Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM. Implement this interface to create a custom form control directive that integrates with Angular forms.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - ControlValueAccessor", + "title": "ControlValueAccessor", "url": "https://angular.dev/api/forms/ControlValueAccessor", "type": "article" }, @@ -1345,7 +1395,7 @@ "description": "Most front-end applications need to communicate with a server over the HTTP protocol, to download or upload data and access other back-end services. Angular provides a client HTTP API for Angular applications, the `HttpClient` service class in `@angular/common/http`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - HTTP Client", + "title": "HTTP Client", "url": "https://angular.dev/guide/http", "type": "article" }, @@ -1366,7 +1416,7 @@ "description": "Before you can use `HttpClient` in your app, you must configure it using dependency injection. `HttpClient` is provided using the `provideHttpClient` helper function, which most apps include in the application providers in `app.config.ts`. If your app is using NgModule-based bootstrap instead, you can include `provideHttpClient` in the providers of your app's `NgModule`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Setting up HttpClient", + "title": "Setting up HttpClient", "url": "https://angular.dev/guide/http/setup", "type": "article" }, @@ -1382,7 +1432,7 @@ "description": "`HttpClient` has methods corresponding to the different HTTP verbs used to make requests, both to load data and to apply mutations on the server. Each method returns an RxJS `Observable` which, when subscribed, sends the request and then emits the results when the server responds.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Making requests", + "title": "Making Requests", "url": "https://angular.dev/guide/http/making-requests", "type": "article" }, @@ -1398,7 +1448,7 @@ "description": "Interceptors are middleware that allows common patterns around retrying, caching, logging, and authentication to be abstracted away from individual requests.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Interceptors", + "title": "Interceptors", "url": "https://angular.dev/guide/http/interceptors", "type": "article" }, @@ -1418,11 +1468,6 @@ "title": "RxJS Basics", "description": "Reactive Extensions for JavaScript, or RxJS, is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.\n\nThe reactive paradigm can be used in many different languages through the use of reactive libraries. These libraries are downloaded APIs that provide functionalities for reactive tools like observers and operators. It can be used in your browser or with Node.js.\n\nVisit the following resources to learn more:", "links": [ - { - "title": "RxJS Docs", - "url": "https://rxjs.dev/guide/overview", - "type": "article" - }, { "title": "Learn RxJS", "url": "https://www.learnrxjs.io/", @@ -1480,16 +1525,16 @@ }, "ihsjIcF0tkhjs56458teE": { "title": "Operators", - "description": "RxJS is mostly useful for its operators, even though the Observable is the foundation. Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner.\n\nOperators are functions. There are two kinds of operators:\n\n**Pipeable Operators** are the kind that can be piped to Observables using the syntax observableInstance.pipe(operator()). These include, filter(...), and mergeMap(...). When called, they do not change the existing Observable instance. Instead, they return a new Observable, whose subscription logic is based on the first Observable.\n\nA Pipeable Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Subscribing to the output Observable will also subscribe to the input Observable.\n\n**Creation Operators** are the other kind of operator, which can be called as standalone functions to create a new Observable. For example: of(1, 2, 3) creates an observable that will emit 1, 2, and 3, one right after another. Creation operators will be discussed in more detail in a later section.\n\nPiping\n------\n\nPipeable operators are functions, so they could be used like ordinary functions: op()(obs) — but in practice, there tend to be many of them convolved together, and quickly become unreadable: op4()(op3()(op2()(op1()(obs)))). For that reason, Observables have a method called .pipe() that accomplishes the same thing while being much easier to read:\n\n obs.pipe(op1(), op2(), op3(), op4());\n \n\nCreation Operators\n------------------\n\n**What are creation operators?** Distinct from pipeable operators, creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables.\n\nA typical example of a creation operator would be the interval function. It takes a number (not an Observable) as input argument, and produces an Observable as output:\n\n import { interval } from 'rxjs';\n \n const observable = interval(1000 /* number of milliseconds */);\n \n\nVisit the following resources to learn more:", + "description": "RxJS operators are crucial functions that enable the declarative composition of complex asynchronous code. There are two primary types: **Pipeable Operators**, such as `filter()` or `mergeMap()`, which are chained using the `observableInstance.pipe()` method to transform an existing Observable into a new one without altering the original; and **Creation Operators**, like `of()` or `interval()`, which are standalone functions used to generate new Observables from scratch. This modular approach to handling asynchronous data streams greatly enhances code readability and maintainability.\n\nVisit the following resources to learn more:", "links": [ { - "title": "List of creation operators", - "url": "https://rxjs.dev/guide/operators#creation-operators-list", + "title": "List of Creation Operators", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/creation", "type": "article" }, { "title": "Full RxJS Operators Documentation", - "url": "https://rxjs.dev/guide/operators", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/", "type": "article" } ] @@ -1498,9 +1543,14 @@ "title": "Filtering", "description": "RxJS provides a variety of filtering operators that you can use to filter and transform the data in a stream. You can use these operators in combination with other RxJS operators to create powerful and efficient data processing pipelines.\n\nVisit the following resources to learn more:", "links": [ + { + "title": "RxJS Operators", + "url": "https://www.learnrxjs.io/learn-rxjs/operators", + "type": "article" + }, { "title": "Understanding RxJS Operators", - "url": "https://rxjs.dev/api/operators", + "url": "https://medium.com/@madhavi792002/understanding-rxjs-operators-a-friendly-guide-to-reactive-programming-part-1-305dbc0c6e72", "type": "article" } ] @@ -1511,21 +1561,16 @@ "links": [ { "title": "throttleTime", - "url": "https://rxjs.dev/api/operators/throttleTime", - "type": "article" - }, - { - "title": "sampleTime", - "url": "https://rxjs.dev/api/operators/sampleTime", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/filtering/throttletime", "type": "article" }, { "title": "auditTime", - "url": "https://rxjs.dev/api/operators/auditTime", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/filtering/audittime", "type": "article" }, { - "title": "Blogs and tutorials on RxJS", + "title": "Blogs and Tutorials on RxJS", "url": "https://blog.angular-university.io/functional-reactive-programming-for-angular-2-developers-rxjs-and-observables/", "type": "article" } @@ -1533,36 +1578,41 @@ }, "kdMJHljMzGA3oRlh8Zvos": { "title": "Transformation", - "description": "In RxJS, \"transformation\" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:\n\n* **map**: applies a function to each item emitted by the Observable and emits the resulting value\n* **mergeMap**: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable\n* **switchMap**: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable\n* **concatMap**: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable\n* **exhaustMap**: applies a function to each item emitted by the Observable, but ignores subsequent emissions until the current Observable completes\n\nThese are just a few examples of the many methods available in RxJS for transforming the data emitted by an Observable. Each method has its own specific use case, and the best method to use will depend on the requirements of your application.\n\nVisit the following resources to learn more:", + "description": "In RxJS, \"transformation\" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:\n\n* **map**: applies a function to each item emitted by the Observable and emits the resulting value\n* **mergeMap**: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable\n* **switchMap**: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable\n* **concatMap**: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable\n* **exhaustMap**: applies a function to each item emitted by the Observable, but ignores subsequent emissions until the current Observable completes\n\nVisit the following resources to learn more:", "links": [ { - "title": "RxJs Docs - Operators", - "url": "https://rxjs.dev/api/operators", + "title": "The RxJS Library", + "url": "https://v17.angular.io/guide/rx-library", "type": "article" }, { - "title": "map", - "url": "https://rxjs.dev/api/operators/map", + "title": "Merge", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/merge", "type": "article" }, { - "title": "mergeMap", - "url": "https://rxjs.dev/api/operators/mergeMap", + "title": "Concat", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/concat", + "type": "article" + }, + { + "title": "Zip", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/zip", "type": "article" }, { "title": "switchMap", - "url": "https://rxjs.dev/api/operators/switchMap", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap", "type": "article" }, { "title": "concatMap", - "url": "https://rxjs.dev/api/operators/concatMap", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/transformation/concatMap", "type": "article" }, { "title": "exhaustMap", - "url": "https://rxjs.dev/api/operators/exhaustMap", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/transformation/exhaustMap", "type": "article" }, { @@ -1574,15 +1624,51 @@ }, "IgUHqfVhiGpwxT9tY8O88": { "title": "Combination", - "description": "Combination operators in RxJS are used to combine multiple observables into a single observable. There are several types of combination operators, including:\n\n* Merge: merges multiple observables into a single observable that emits items from each source observable in a sequence.\n \n* Concat: concatenates multiple observables into a single observable that emits the items from each source observable in sequence, one after the other.\n \n* Zip: combines the items from multiple observables into a single observable by combining the items from each observable at a corresponding index.\n \n* CombineLatest: combines the latest values from multiple observables into a single observable by emitting an item whenever any of the source observables emit an item.\n \n* WithLatestFrom: combines the latest value from one observable with the latest values from multiple other observables.\n \n* ForkJoin: combines the items from multiple observables into a single observable by emitting an item only after all of the source observables have emitted an item.\n \n\nFurther documentation can be found in the official RxJS documentation:\n\n* Merge: [https://rxjs.dev/api/operators/merge](https://rxjs.dev/api/operators/merge)\n \n* Concat: [https://rxjs.dev/api/operators/concat](https://rxjs.dev/api/operators/concat)\n \n* Zip: [https://rxjs.dev/api/operators/zip](https://rxjs.dev/api/operators/zip)\n \n* CombineLatest: [https://rxjs.dev/api/operators/combineLatest](https://rxjs.dev/api/operators/combineLatest)\n \n* WithLatestFrom: [https://rxjs.dev/api/operators/withLatestFrom](https://rxjs.dev/api/operators/withLatestFrom)\n \n* ForkJoin: [https://rxjs.dev/api/index/function/forkJoin](https://rxjs.dev/api/index/function/forkJoin)", - "links": [] + "description": "RxJS combination operators merge multiple observables into a single one using various strategies. Key operators include: `Merge` (emits items from all sources as they arrive), `Concat` (emits items from sources sequentially, one after another), `Zip` (pairs emissions from sources based on index), `CombineLatest` (emits based on the latest values from all sources whenever any source emits), `WithLatestFrom` (combines the value of one observable with the latest values of others when the first observable emits), and `ForkJoin` (emits the last value from each source only after all sources complete).\n\nVisit the following resources to learn more:", + "links": [ + { + "title": "The RxJS Library", + "url": "https://v17.angular.io/guide/rx-library", + "type": "article" + }, + { + "title": "Merge", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/merge", + "type": "article" + }, + { + "title": "Concat", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/concat", + "type": "article" + }, + { + "title": "Zip", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/zip", + "type": "article" + }, + { + "title": "CombineLatest", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/combineLatest", + "type": "article" + }, + { + "title": "WithLatestFrom", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/withLatestFrom", + "type": "article" + }, + { + "title": "ForkJoin", + "url": "https://www.learnrxjs.io/learn-rxjs/operators/combination/forkJoin", + "type": "article" + } + ] }, "u1TG8i145o0RKhOR_5epf": { "title": "Signals", "description": "Angular Signals is a system that granularly tracks how and where your state is used throughout an application, allowing the framework to optimize rendering updates.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Signals", + "title": "Signals", "url": "https://angular.dev/guide/signals", "type": "article" }, @@ -1603,12 +1689,12 @@ "description": "Angular's `@angular/core/rxjs-interop` package provides useful utilities to integrate Angular Signals with RxJS Observables. Use a `toSignal` function to create a signal that tracks the value of an Observable. Use the `toObservable` utility to create an Observable which tracks the value of a signal.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - RxJS Interop", + "title": "RxJS Interop", "url": "https://angular.dev/guide/signals/rxjs-interop", "type": "article" }, { - "title": "Angular signals RxJS interop from a practical example", + "title": "Angular Signals RxJS Interop from a Practical example", "url": "https://angular.love/en/angular-signals-rxjs-interop-from-a-practical-example", "type": "article" }, @@ -1624,7 +1710,7 @@ "description": "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`.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Inputs as Signals", + "title": "Inputs as Signals", "url": "https://angular.dev/guide/signals/inputs", "type": "article" }, @@ -1645,7 +1731,7 @@ "description": "A component or directive can define queries that find child elements and read values from their injectors. Developers most commonly use queries to retrieve references to components, directives, DOM elements, and more. There are two categories of query: view queries and content queries.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Queries as Signals", + "title": "Queries as Signals", "url": "https://angular.dev/guide/signals/queries", "type": "article" }, @@ -1655,7 +1741,7 @@ "type": "article" }, { - "title": "Angular signal queries with the viewChild() and contentChild() functions", + "title": "Angular Signal Queries with the viewChild() and contentChild() functions", "url": "https://www.youtube.com/watch?v=b35ts9OinBc", "type": "video" } @@ -1666,7 +1752,7 @@ "description": "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.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Model Inputs", + "title": "Model Inputs", "url": "https://angular.dev/guide/signals/model", "type": "article" }, @@ -1718,17 +1804,17 @@ "description": "Ngxs is a state management pattern for the Angular framework. It acts as a single source of truth for our application. Ngxs is very simple and easily implementable. It reduce lots of boilerplate code . It is a replacement for Ngrx. In Ngrx we are creating state, action, reducer, and effects but in Ngxs, we are creating only state and actions instead of all of this. Like Ngrx, Ngxs is also asynchronous and when we dispatch any action we can get a response back.\n\nVisit the following resources to learn more:", "links": [ { - "title": "What is NGXS ? - Ngxs.io ", + "title": "What is NGXS?", "url": "https://www.ngxs.io/", "type": "article" }, { - "title": "Details about NGXS - Medium ", + "title": "Details about NGXS", "url": "https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba", "type": "article" }, { - "title": "Practise of NGXS", + "title": "Practice of NGXS", "url": "https://www.youtube.com/watch?v=SGj11j4hxmg", "type": "video" } @@ -1749,7 +1835,7 @@ "type": "article" }, { - "title": "Angular state management with NgRx", + "title": "Angular State Management with NgRx", "url": "https://www.youtube.com/watch?v=a3_GW3RBqn0", "type": "video" }, @@ -1801,7 +1887,7 @@ "description": "Zone.js is a signaling mechanism that Angular uses to detect when an application state might have changed. It captures asynchronous operations like setTimeout, network requests, and event listeners. Angular schedules change detection based on signals from Zone.js.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Resolving zone pollution", + "title": "Resolving Zone Pollution", "url": "https://angular.dev/best-practices/zone-pollution", "type": "article" }, @@ -1827,7 +1913,7 @@ "description": "Angular 18 introduced an experimental feature called zoneless change detection. This technology removes the need for `Zone.js`, a library that was previously used for change detection in Angular from the beginning. By eliminating `Zone.js`, Angular applications can have faster initial renders, smaller bundle sizes, and simpler debugging.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Zoneless", + "title": "Zoneless", "url": "https://angular.dev/guide/experimental/zoneless", "type": "article" }, @@ -1868,12 +1954,12 @@ "type": "opensource" }, { - "title": "Angular Official Docs - devtools", + "title": "Angular Devtools", "url": "https://angular.dev/tools/devtools", "type": "article" }, { - "title": "Angular Official Docs - CLI", + "title": "Angular CLI", "url": "https://angular.dev/tools/cli", "type": "article" }, @@ -1886,7 +1972,7 @@ }, "4YSk6I63Ew--zoXC3xmrC": { "title": "Angular CLI", - "description": "The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command\n\n`npm install -g @angular/cli`\n\nVisit the following resources to learn more:", + "description": "The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command:\n\n`npm install -g @angular/cli`\n\nVisit the following resources to learn more:", "links": [ { "title": "CLI Reference", @@ -1904,7 +1990,7 @@ "type": "article" }, { - "title": "Angular CLI - setup", + "title": "Angular CLI - Setup", "url": "https://www.youtube.com/watch?v=mZnzX3J5XKI", "type": "video" } @@ -1915,12 +2001,12 @@ "description": "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.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Local set-up", + "title": "Local set-up", "url": "https://angular.dev/tools/cli/setup-local", "type": "article" }, { - "title": "Angular Official Docs - Version compatibility guide", + "title": "Version Compatibility Guide", "url": "https://angular.dev/reference/versions", "type": "article" }, @@ -1951,7 +2037,7 @@ "type": "opensource" }, { - "title": "Angular Official Docs - Deployment", + "title": "Deployment", "url": "https://angular.dev/tools/cli/deployment", "type": "article" }, @@ -1987,22 +2073,22 @@ "description": "End-to-end or (E2E) testing is a form of testing used to assert your entire application works as expected from start to finish or \"end-to-end\". E2E testing differs from unit testing in that it is completely decoupled from the underlying implementation details of your code. It is typically used to validate an application in a way that mimics the way a user would interact with it. The `ng e2e` command will first check your project for the \"e2e\" target. If it can't locate it, the CLI will then prompt you which e2e package you would like to use and walk you through the setup.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - End to End Testing", + "title": "End to End Testing", "url": "https://angular.dev/tools/cli/end-to-end", "type": "article" }, { - "title": "Cypress Official Docs - Your First Test with Cypress", + "title": "Your First Test with Cypress", "url": "https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test", "type": "article" }, { - "title": "Nightwatch Official Docs - Writing Tests: Introduction", + "title": "Writing Tests: Introduction", "url": "https://nightwatchjs.org/guide/writing-tests/introduction.html", "type": "article" }, { - "title": "Webdriver Official Docs - Getting Started", + "title": "Getting Started", "url": "https://webdriver.io/docs/gettingstarted/", "type": "article" }, @@ -2018,7 +2104,7 @@ "description": "A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Generating code using schematics", + "title": "Generating Code using Schematics", "url": "https://angular.dev/tools/cli/schematics", "type": "article" }, @@ -2034,7 +2120,7 @@ "description": "You can define different named build configurations for your project, such as `development` and `production`, with different defaults. Each named configuration can have defaults for any of the options that apply to the various builder targets, such as `build`, `serve`, and `test`. The Angular CLI can replace files for each environment if you pass a `--configuration` flag with the named configuration when running a CLI command.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Build environments", + "title": "Build Environments", "url": "https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app", "type": "article" }, @@ -2055,7 +2141,7 @@ "type": "opensource" }, { - "title": "Angular Official Docs - CLI Builders", + "title": "CLI Builders", "url": "https://angular.dev/tools/cli/cli-builder", "type": "article" }, @@ -2092,7 +2178,7 @@ "description": "Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. You can view component trees and change detection cycles.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - devtools", + "title": "Angular Devtools", "url": "https://angular.dev/tools/devtools", "type": "article" }, @@ -2134,9 +2220,14 @@ "description": "Use the Angular CLI and the npm package manager to build and publish your library as an npm package.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Website", + "title": "Libraries", "url": "https://angular.dev/tools/libraries/creating-libraries", "type": "article" + }, + { + "title": "Angular CLI", + "url": "https://angular.dev/tools/cli", + "type": "article" } ] }, @@ -2145,7 +2236,7 @@ "description": "Libraries are published as `npm packages`, usually together with schematics that integrate them with the Angular CLI. To integrate reusable library code into an application, you need to install the package and import the provided functionality in the location you use it. For most published Angular libraries, use the `ng add ` Angular CLI command. A published library typically provides a `README` file or other documentation on how to add that library to your application. A library is able to be updated by the publisher, and also has individual dependencies which need to be kept current. To check for updates to your installed libraries, use the `ng update` Angular CLI command.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Using Libraries", + "title": "Using Libraries", "url": "https://angular.dev/tools/libraries/using-libraries", "type": "article" }, @@ -2166,12 +2257,12 @@ "type": "opensource" }, { - "title": "Angular Official Docs - Creating Libraries", + "title": "Creating Libraries", "url": "https://angular.dev/tools/libraries/creating-libraries", "type": "article" }, { - "title": "Angular Official Docs - File Structure: Library project files", + "title": "File Structure: Library project files", "url": "https://angular.dev/reference/configs/file-structure#library-project-files", "type": "article" } @@ -2182,7 +2273,7 @@ "description": "A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Server-side rendering", + "title": "Server-side Rendering", "url": "https://angular.dev/guide/ssr", "type": "article" }, @@ -2208,7 +2299,7 @@ "type": "podcast" }, { - "title": "Angular Official Docs - Prerendering (SSG)", + "title": "Prerendering (SSG)", "url": "https://angular.dev/guide/prerendering", "type": "article" }, @@ -2224,12 +2315,22 @@ "description": "AnalogJS is a full-stack meta-framework powered by Vite and Nitro for Angular. Analog supports both Server-Side Rendering (SSR) and Static Site Generation (SSG). Analog uses file-based routing and supports API (server) routes.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Analog", + "title": "analogjs/analog", + "url": "https://github.com/analogjs/analog", + "type": "opensource" + }, + { + "title": "AnalogJS", "url": "https://analogjs.org/", "type": "article" }, { - "title": "Robin Goetz - AnalogJS - The Vite powered Angular meta-framework | NG Belgrade Conf 2024", + "title": "AnalogJS Documentation", + "url": "https://analogjs.org/docs", + "type": "article" + }, + { + "title": "Robin Goetz - AnalogJS - The Vite powered Angular meta-framework", "url": "https://www.youtube.com/watch?v=BSgpvP4eAGk", "type": "video" }, @@ -2250,7 +2351,7 @@ "description": "This topic describes Angular's built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. It doesn't cover application-level security, such as authentication and authorization.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Security", + "title": "Security", "url": "https://angular.dev/best-practices/security", "type": "article" }, @@ -2263,10 +2364,10 @@ }, "umUX4Hxk7srHlFR_Un-u7": { "title": "Cross-site Scripting", - "description": "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.\n\nTo 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.\n\nVisit the following resources to learn more:", + "description": "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.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Preventing cross-site scripting (XSS)", + "title": "Preventing cross-site Scripting (XSS)", "url": "https://angular.dev/best-practices/security#preventing-cross-site-scripting-xss", "type": "article" }, @@ -2279,10 +2380,10 @@ }, "cgI9oeUHufA-ky_W1zENe": { "title": "Sanitization", - "description": "Sanitization is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. In many cases, sanitization doesn't change a value at all. Sanitization depends on context: A value that's harmless in CSS is potentially dangerous in a URL.\n\nAngular sanitizes untrusted values for HTML and URLs. Sanitizing resource URLs isn't possible because they contain arbitrary code. In development mode, Angular prints a console warning when it has to change a value during sanitization.\n\nInterpolated content is always escaped —the HTML isn't interpreted and the browser displays angle brackets in the element's text content.\n\nFor the HTML to be interpreted, bind it to an HTML property such as `innerHTML`. Be aware that binding a value that an attacker might control into `innerHTML` normally causes an XSS vulnerability.\n\nVisit the following resources to learn more:", + "description": "Sanitization is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. In many cases, sanitization doesn't change a value at all. Sanitization depends on context: A value that's harmless in CSS is potentially dangerous in a URL.\n\nAngular sanitizes untrusted values for HTML and URLs. Sanitizing resource URLs isn't possible because they contain arbitrary code. In development mode, Angular prints a console warning when it has to change a value during sanitization.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Angular Official Docs - Sanitization and security contexts", + "title": "Sanitization and Security Contexts", "url": "https://angular.dev/best-practices/security#sanitization-and-security-contexts", "type": "article" } @@ -2293,7 +2394,7 @@ "description": "Sometimes applications genuinely need to include executable code, display an `