Backport of #70224, which landed in main as 1c2b0575ed with a feat
commit and so is only eligible for minor.
adev deploys main to next.angular.dev and the stable release branch to
angular.dev, so the mascot is live on next but not on the site itself.
Typed as a refactor here so it can ride a patch. The file is byte
identical to the one that landed in main.
`routing.svg` and `directives.svg` each carry leftover text after a
`stroke-miterlimit` attribute, which has made them invalid XML since the
angular.dev import. They render only because decorative headers inline
them into the page, where the HTML parser turns the leftovers into empty
attributes, but the files fail anywhere they are parsed as XML,
including when served directly as `image/svg+xml`.
Neither drops anything from the drawing. The `directives.svg` leftover
repeats a path the file already declares.
(cherry picked from commit f35a3961c4)
Consolidates deindentation logic into formatCode so both docs-code and
docs-code-block are covered by a single fix. The original deindent
function incorrectly iterated over blank lines instead of non-blank
lines when computing minimum indentation, causing code blocks to render
with excessive leading whitespace. Also fixes region extraction which
had the same trim-before-deindent ordering issue.
(cherry picked from commit 7febf40e0d)
The "Value transformation" section taught readers to hand-roll
transformation with `linkedSignal()` and a manual parse method, even
though `@angular/forms/signals` ships `transformedValue()` for exactly
this case. Readers ended up with a weaker version of a feature the
framework already provides — notably, no parse error reporting.
Rewrite the section around `transformedValue()` and document the parts
the manual pattern could not cover: returning `{error}` from `parse` to
surface parse errors on the field's `errors()`, and `reset()` clearing
them. This also makes good on the cross-reference from the validation
guide, which pointed here for parse error details the section never
covered.
Fixes#70206
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
(cherry picked from commit 182c371d82)
NgModel injects ControlContainer with @Host(), which stops the injector at
the component host element boundary. When NgForm lives in a parent component
and ngModel lives in a child component, the injection returns null silently
and the control acts standalone — never registering with the form.
To surface this invisible failure, emit a dev-mode warning (NG01354) when
ngModel's @Host() injection finds nothing but the element Injector can still
reach a ControlContainer further up the hierarchy. The warning identifies the
cross-boundary issue and points developers to the viewProviders fix or the
standalone option.
Adds the NG01354 reference page explaining why the warning fires and providing
two remediation paths: bridging ControlContainer via viewProviders, or opting
out with [ngModelOptions]="{standalone: true}".
Fixes#47580
(cherry picked from commit 38d093232c)
The routing header draws a serpentine route with map pins on it but
nobody travelling it. Angie now stands on the top segment, the same way
she stands on the road in the roadmap header.
She needs more headroom than the canvas had, so the viewBox gains 12
units at the top and the illustration carries its own max-height, which
keeps the rest of the drawing at the size it rendered before.
(cherry picked from commit 064530447e)
Angular's internal LView/TNode bookkeeping can get out of sync with the
real DOM: manual DOM manipulation, a browser extension, or an edge case in
Angular's own view-insertion/reordering code can all leave Angular believing
a node is still attached at a given position when it isn't. The next time
Angular's renderer calls `insertBefore` relative to that stale reference
node, the native DOM API throws an opaque `NotFoundError` with no indication
of which node or component was involved, making these errors effectively
undebuggable in production:
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node
before which the new node is to be inserted is not a child of this node.
at Node.insertBefore (native)
at DefaultDomRenderer2.insertBefore (packages/platform-browser/src/dom/dom_renderer.ts)
at nativeInsertBefore (packages/core/src/render3/dom_node_manipulation.ts)
at nativeAppendOrInsertBefore (packages/core/src/render3/dom_node_manipulation.ts)
... (called while Angular inserts or moves a view during change detection)
Check the reference node's actual parent against the expected parent before
calling the native `insertBefore`, and throw a descriptive `RuntimeError`
(NG05106) instead, following the same pattern already used for hydration
node mismatches.
(cherry picked from commit 1cb3d606bf)
This updates the docs to be explicit about `animate.leave` and nested element removal order. It clearly specifies that `animate.leave` will only fire nested animations within the same component template.
closes: #70131
(cherry picked from commit 3d32db6a49)
Scrolling to the top or bottom of a dropdown let the scroll event chain into
the page behind it, causing the whole app to scroll. #70137 fixed this for the
version picker, but the same containment was missing on every other menu.
The API reference filter, the tutorial step list and the update guide's version
dropdowns already had a scroll container, so they only needed
overscroll-behavior.
The social and theme mini-menus had neither a height cap nor overflow, so
overscroll-behavior alone would have been inert on them. They now share the
version picker's max-height/overflow-y/overscroll-behavior, hoisted onto
.adev-mini-menu, which also keeps their items reachable when the viewport is
too short to fit the whole menu.
(cherry picked from commit dd29713828)
Update the roadmap to reflect that Angular Aria became stable in Angular v22 while development of new patterns continues.
(cherry picked from commit 8e41e97dfe)
Scrolling to the top or bottom of the version picker's dropdown list
let the scroll event chain into the page behind it, causing the whole
app to scroll. The search dialog and search history dropdowns already
guard against this with overscroll-behavior: contain; apply the same
fix to the version picker.
(cherry picked from commit 768c8c29dc)
Inline code inside a link renders as a chip with its own background. Text
decoration propagates from the anchor and cannot be cancelled by a descendant,
so with the chip laid out as a regular inline box the link underline is drawn
straight across it.
Lay the chip out as an atomic inline box, which the propagated decoration is not
drawn across. This applies to the link rule only; code outside of links keeps
`display: inline` for wrapping in multiline paragraphs, and the link rule
already sets `white-space: nowrap`.
(cherry picked from commit efe1aae1cd)
Two link issues on the roadmap page:
- "Introduce deferred loading" linked next.angular.dev, the preview build of
this same site, for a page that exists here at guide/templates/defer. Use the
relative path so readers stay on the stable docs.
- "Local template variables" linked "`@let` docs", putting a code chip and a
plain word in one anchor. The anchor's underline crosses the chip and the two
halves render in different colors. Link only the symbol, as the rest of adev
does.
Also on the same page:
- Drop a stray space before a period in the Components card.
- Give the older completion labels the same "Completed in <quarter>" wording the
newer cards already use.
(cherry picked from commit f2f12925bd)
The `allowSignalWrites` option of `effect()` became a no-op and was
deprecated in v19, but the update guide never mentioned it. Applications
upgrading from v18 or earlier still carry the option at their `effect()`
call sites, where it now only produces a dev-mode warning.
Add an entry to the v19 recommendations instructing those applications to
remove it, mirroring the wording of the deprecation notice on
`CreateEffectOptions`.
(cherry picked from commit 690eecda6b)
The "Customizing model inputs" section linked "standard input" back to
the inputs guide itself, a dead-end self-link. Point the sentence at the
relevant in-page sections instead (#required-inputs and #input-aliases).
Also merge the two stacked intro TIP callouts into a single tip.
(cherry picked from commit 5dd634d18d)
Report unsupported style property binding values in development mode while preserving existing binding behavior. Unwrap trusted style values before appending unit suffixes and link NG0318 warnings to the corresponding error guide.
(cherry picked from commit e43eb96341)
Several external links pointed at locations that have moved or gone away:
- ng-packagr, webpack, and node-glob renamed their default branch from
master to main, so the deep links into those repos redirect.
- The npm package pages moved from npmjs.org to www.npmjs.com.
- The Angular Material and CDK docs moved from material.angular.io to
material.angular.dev.
- The semver reference pointed at the defunct semver.io service; point it
at the SemVer spec at semver.org instead.
- The MDN animationiteration event link had a typo (animationitration).
- compiler-cli's metadata/schema.ts was removed after v12; pin the link to
the 12.2.x tag where the file still exists.
- The angularindepth.com article is gone (its domain is parked); link to its
live home on the Angular In Depth Medium publication.
- Google moved the Lighthouse user-timing docs to developer.chrome.com.
Point the links at their current, working locations.
(cherry picked from commit 058c7f9b0c)
Several adev example and tutorial files read a signal input as a bare
reference (this.foo) instead of invoking it (this.foo()). Because an
InputSignal is a function object, the bare reference is always truthy
and never yields the underlying value, so the surrounding guard or
binding silently did the wrong thing:
- animations open-close(.1/.3): the `!this.logging` guard in
onAnimationEvent was always false, so the early return never fired.
- form-validation forbidden-name.directive: the `this.forbiddenName`
ternary condition was always truthy, so validation ran even when no
forbidden name was configured.
- first-app steps 12 and 14 housing-location: `housingLocation.photo`
read `.photo` off the signal function (undefined), leaving the
listing image src empty.
Invoke the signals so the examples reflect correct signal-input usage.
(cherry picked from commit 0d26130a4c)
Two custom properties in the shared-docs styles reference tokens that are
defined nowhere, so the declarations are invalid at computed-value time.
_kbd.scss sets the <kbd> text color with var(---tertiary-contrast); the extra
leading dash points at an undefined property with no fallback, so the color
resolves to the inherited value instead of the intended --tertiary-contrast.
_colors.scss builds --light-pink-to-light-purple-horizontal-gradient from
var(--light-purple), which is not defined anywhere (the sibling token is
--light-violet, defined in the same file), invalidating the gradient. The
gradient is not currently referenced, so this corrects a latent malformed
declaration rather than a visible bug.
Point both at the defined tokens: --tertiary-contrast and --light-violet.
(cherry picked from commit e70994bdc3)
In the light theme block of _colors.scss, --webgl-page-background and
--webgl-gray-unfilled were written on a single line without a separating
semicolon, and --webgl-page-background wrapped --page-background in an
invalid nested var(). As a result --webgl-page-background got a garbage
value and --webgl-gray-unfilled was never defined in the light theme.
Split them into two well-formed declarations and drop the nested var(),
matching the structure already used in the dark theme block.
(cherry picked from commit 91822538fe)
The retro-themed aria autocomplete examples style the clear button with
var(--win95-gray), var(--win95-dark-gray), var(--win95-light), and
var(--win95-shadow), but none of the three example stylesheets defines
those custom properties. The variables resolve to nothing, so the button
falls back to inherited theme colors — color: var(--win95-shadow) becomes
the light-theme text color in dark mode, leaving the button unreadable.
Define the four variables in :host of each example, matching the values
already used by the sibling aria tree examples, so the clear button keeps
its Windows 95 look in both light and dark themes.
(cherry picked from commit 8cd4c89c29)
The retro variants of the toolbar, select, and multiselect aria examples
tint the pressed button background with
color-mix(in srgb, var(--retro-button-color) 60%, var(--gray-50)), but
--gray-50 is defined nowhere. Per the CSS spec, a var() with no fallback
pointing at an undefined property invalidates the whole color-mix(), so the
declaration is dropped and the pressed-state tint never applies.
Define a local --retro-pressed-tint token in each example's :host (#fbfbfb,
the value $gray-50 resolved to) with a :host-context(.docs-dark-mode) override
to #151417, and use it for the pressed-state mix. This keeps the example
self-contained rather than depending on adev's global token scope, while
staying theme-aware in both light and dark, following the same token-flipping
pattern used in code-editor.component.scss.
(cherry picked from commit 48c1e5bb0f)
Updates the strictTemplates documentation in Angular compiler options to note that the default is true, replacing the reference to the obsolete ng new --strict flag.
(cherry picked from commit 2bcd12a6a5)
Several guides, examples, and the update-guide recommendations linked to
external resources over insecure http. Switch them to https.
(cherry picked from commit 28d59e8d63)
Angular Robot