From 35e7b9a1257be79eaf4c9ee39cbeb7459478c513 Mon Sep 17 00:00:00 2001 From: Alan Agius <17563226+alan-agius4@users.noreply.github.com> Date: Fri, 14 Nov 2025 13:53:24 +0000 Subject: [PATCH 01/34] fix(docs-infra): update firebase caching regex for generated files The regex for caching generated files in firebase.json has been updated to include lowercase letters and underscores in the 8-character hash. This ensures that files with names like `chunk-CrXHmw_W.js` are correctly cached. (cherry picked from commit e840cd547d453e677ab975715febf3e67a27e1e2) --- adev/firebase.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/adev/firebase.json b/adev/firebase.json index 751f1b4f452e..0d336b80ca1e 100644 --- a/adev/firebase.json +++ b/adev/firebase.json @@ -32,7 +32,7 @@ ] }, { - "source": "/**/*-[0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z][0-9A-Z].*", + "source": "/**/*-[0-9A-Za-z_][0-9A-Za-z_][0-9A-Za-z_][0-9A-Za-z_][0-9A-Za-z_][0-9A-Za-z_][0-9A-Za-z_][0-9A-Za-z_].*", "headers": [ { "key": "Cache-Control", @@ -69,7 +69,6 @@ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }, - { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" From 853fd9d4cf8970e3dd18c1e54c14195b4f76deeb Mon Sep 17 00:00:00 2001 From: KAUSHIK REDDY AWALA Date: Thu, 13 Nov 2025 23:33:11 -0600 Subject: [PATCH 02/34] docs(docs-infra): update di factory provider function to use correct parameters This PR fixes a parameter mismatch in the `apiClientFactory` function documentation example. The factory was previously passing only http and `userService` to the ``ApiClient`` constructor, but the constructor actually requires http, `baseUrl`, and `rateLimitMs` as separate parameters. Key Changes: Extracts baseUrl and rateLimitMs from UserService using getter methods Updates the ApiClient instantiation to pass all three required constructor parameters Adds a comment explaining the assumption about UserService providing these values (cherry picked from commit 6f716e400ef82c0533356316d603d549af94d86e) --- adev/src/content/guide/di/defining-dependency-providers.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/adev/src/content/guide/di/defining-dependency-providers.md b/adev/src/content/guide/di/defining-dependency-providers.md index 294a0442f134..3702715d59b6 100644 --- a/adev/src/content/guide/di/defining-dependency-providers.md +++ b/adev/src/content/guide/di/defining-dependency-providers.md @@ -565,7 +565,11 @@ const apiClientFactory = () => { const http = inject(HttpClient); const userService = inject(UserService); - return new ApiClient(http, userService); + // Assuming userService provides these values + const baseUrl = userService.getApiBaseUrl(); + const rateLimitMs = userService.getRateLimit(); + + return new ApiClient(http, baseUrl, rateLimitMs); }; // Provider configuration From e0a6dadf1b08ebf0ef73ccc3c2d5ccff9cef5984 Mon Sep 17 00:00:00 2001 From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com> Date: Thu, 13 Nov 2025 19:08:32 -0500 Subject: [PATCH 03/34] docs: Uses the self-closing tag syntax (cherry picked from commit 9ec964334eaf57a30d64b3558ae739bbca24a189) --- adev/src/content/guide/components/content-projection.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev/src/content/guide/components/content-projection.md b/adev/src/content/guide/components/content-projection.md index c7f8ae6158ef..efa351cabf9a 100644 --- a/adev/src/content/guide/components/content-projection.md +++ b/adev/src/content/guide/components/content-projection.md @@ -18,7 +18,7 @@ export class CustomCard {/* ... */} ```angular-ts @Component({ selector: 'custom-card', - template: '
', + template: '
', }) export class CustomCard {/* ... */} ``` From f7fcef1439468c0802a167fba3db8c668548c8f1 Mon Sep 17 00:00:00 2001 From: Shuaib Hasan Akib Date: Sun, 16 Nov 2025 00:54:31 +0600 Subject: [PATCH 04/34] docs(docs-infra): simplify file headers in blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed redundant "src/app/" prefix from file headers (e.g., "src/app/open-close.component.ts" → "open-close.component.ts") to make code examples cleaner and more focused. (cherry picked from commit b3adb6001cc250775178379130ebcc0c9eb1aecf) --- .../guide/di/creating-injectable-service.md | 14 +++---- .../guide/directives/attribute-directives.md | 38 +++++++++---------- adev/src/content/guide/directives/overview.md | 18 ++++----- .../src/content/guide/forms/reactive-forms.md | 2 +- .../guide/forms/template-driven-forms.md | 2 +- adev/src/content/guide/i18n/example.md | 4 +- adev/src/content/guide/i18n/prepare.md | 22 +++++------ .../content/guide/i18n/translation-files.md | 2 +- .../content/guide/routing/router-tutorial.md | 18 ++++----- .../guide/routing/routing-with-urlmatcher.md | 6 +-- .../guide/testing/components-scenarios.md | 6 +-- 11 files changed, 66 insertions(+), 66 deletions(-) diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md index 35ed41ed147a..e90000c5d425 100644 --- a/adev/src/content/guide/di/creating-injectable-service.md +++ b/adev/src/content/guide/di/creating-injectable-service.md @@ -21,7 +21,7 @@ Angular helps you follow these principles by making it easy to factor your appli Here's an example of a service class that logs to the browser console: - + export class Logger { log(msg: unknown) { console.log(msg); } error(msg: unknown) { console.error(msg); } @@ -33,7 +33,7 @@ Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server: - import { inject } from "@angular/core"; @@ -67,7 +67,7 @@ ng generate service heroes/hero This command creates the following default `HeroService`: - + import { Injectable } from '@angular/core'; @Injectable({ @@ -81,7 +81,7 @@ The metadata, `providedIn: 'root'`, means that the `HeroService` is provided thr Add a `getHeroes()` method that returns the heroes from `mock.heroes.ts` to get the hero mock data: - + import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @@ -106,7 +106,7 @@ To inject a service as a dependency into a component, you can declare a class fi The following example specifies the `HeroService` in the `HeroListComponent`. The type of `heroService` is `HeroService`. - + import { inject } from "@angular/core"; export class HeroListComponent { @@ -116,7 +116,7 @@ private heroService = inject(HeroService); It is also possible to inject a service into a component using the component's constructor: - + constructor(private heroService: HeroService) @@ -127,7 +127,7 @@ The `inject` method can be used in both classes and functions, while the constru When a service depends on another service, follow the same pattern as injecting into a component. In the following example, `HeroService` depends on a `Logger` service to report its activities: - import { inject, Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; diff --git a/adev/src/content/guide/directives/attribute-directives.md b/adev/src/content/guide/directives/attribute-directives.md index 028ad78fe3f9..6e7eadcdd44d 100644 --- a/adev/src/content/guide/directives/attribute-directives.md +++ b/adev/src/content/guide/directives/attribute-directives.md @@ -16,7 +16,7 @@ This section walks you through creating a highlight directive that sets the back The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`. - + The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`. @@ -27,17 +27,17 @@ This section walks you through creating a highlight directive that sets the back 1. Add logic to the `HighlightDirective` class that sets the background to yellow. - + HELPFUL: Directives _do not_ support namespaces. - + ## Applying an attribute directive 1. To use the `HighlightDirective`, add a `

` element to the HTML template with the directive as an attribute. - + Angular creates an instance of the `HighlightDirective` class and injects a reference to the `

` element into the directive's constructor, which sets the `

` element's background style to yellow. @@ -47,11 +47,11 @@ This section shows you how to detect when a user mouses into or out of the eleme 1. Import `HostListener` from '@angular/core'. - + 1. Add two event handlers that respond when the mouse enters or leaves, each with the `@HostListener()` decorator. - + Subscribe to events of the DOM element that hosts an attribute directive, the `

` in this case, with the `@HostListener()` decorator. @@ -59,7 +59,7 @@ HELPFUL: The handlers delegate to a helper method, `highlight()`, that sets the The complete directive is as follows: - + The background color appears when the pointer hovers over the paragraph element and disappears as the pointer moves out. @@ -71,21 +71,21 @@ This section walks you through setting the highlight color while applying the `H 1. In `highlight.directive.ts`, import `Input` from `@angular/core`. - + 1. Add an `appHighlight` `input` property. - + The `input()` function adds metadata to the class that makes the directive's `appHighlight` property available for binding. 1. In `app.component.ts`, add a `color` property to the `AppComponent`. - + 1. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`. - + The `[appHighlight]` attribute binding performs two tasks: - Applies the highlighting directive to the `

` element @@ -97,15 +97,15 @@ This section guides you through adding radio buttons to bind your color choice t 1. Add markup to `app.component.html` for choosing a color as follows: - + 1. Revise the `AppComponent.color` so that it has no initial value. - + 1. In `highlight.directive.ts`, revise `onMouseEnter` method so that it first tries to highlight with `appHighlight` and falls back to `red` if `appHighlight` is `undefined`. - + 1. Serve your application to verify that the user can choose the color with the radio buttons. @@ -117,16 +117,16 @@ This section guides you through configuring your application so the developer ca 1. Add a second `Input()` property to `HighlightDirective` called `defaultColor`. - + 1. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `appHighlight`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`. - + 1. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML. In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because it is static. - + As with components, you can add multiple directive property bindings to a host element. @@ -142,12 +142,12 @@ To prevent expression evaluation in the browser, add `ngNonBindable` to the host In the following example, the expression `{{ 1 + 1 }}` renders just as it does in your code editor, and does not display `2`. - + Applying `ngNonBindable` to an element stops binding for that element's child elements. However, `ngNonBindable` still lets directives work on the element where you apply `ngNonBindable`. In the following example, the `appHighlight` directive is still active but Angular does not evaluate the expression `{{ 1 + 1 }}`. - + If you apply `ngNonBindable` to a parent element, Angular disables interpolation and binding of any sort, such as property binding or event binding, for the element's children. diff --git a/adev/src/content/guide/directives/overview.md b/adev/src/content/guide/directives/overview.md index 07a62d2c98c4..2ea704759ebf 100644 --- a/adev/src/content/guide/directives/overview.md +++ b/adev/src/content/guide/directives/overview.md @@ -38,7 +38,7 @@ HELPFUL: To add or remove a _single_ class, use [class binding](guide/templates/ To use `NgClass`, add it to the component's `imports` list. - + ### Using `NgClass` with an expression @@ -46,7 +46,7 @@ On the element you'd like to style, add `[ngClass]` and set it equal to an expre In this case, `isSpecial` is a boolean set to `true` in `app.component.ts`. Because `isSpecial` is true, `ngClass` applies the class of `special` to the `

`. - + ### Using `NgClass` with a method @@ -57,11 +57,11 @@ Because `isSpecial` is true, `ngClass` applies the class of `special` to the ` + 1. In the template, add the `ngClass` property binding to `currentClasses` to set the element's classes: - + For this use case, Angular applies the classes on initialization and in case of changes caused by reassigning the `currentClasses` object. The full example calls `setCurrentClasses()` initially with `ngOnInit()` when the user clicks on the `Refresh currentClasses` button. @@ -75,7 +75,7 @@ HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates To use `NgStyle`, add it to the component's `imports` list. - + Use `NgStyle` to set multiple inline styles simultaneously, based on the state of the component. @@ -83,11 +83,11 @@ Use `NgStyle` to set multiple inline styles simultaneously, based on the state o In the following example, `setCurrentStyles()` sets the property `currentStyles` with an object that defines three styles, based on the state of three other component properties. - + 1. To set the element's styles, add an `ngStyle` property binding to `currentStyles`. - + For this use case, Angular applies the styles upon initialization and in case of changes. To do this, the full example calls `setCurrentStyles()` initially with `ngOnInit()` and when the dependent properties change through a button click. @@ -101,7 +101,7 @@ Use `` when there's no single element to host the directive. Here's a conditional paragraph using ``. - + ngcontainer paragraph with proper style @@ -111,7 +111,7 @@ Here's a conditional paragraph using ``. 1. To conditionally exclude an `