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)
## Summary
This PR adds v22.x and v23 release dates. It also changes Angular's release cadence to a yearly cycle.
## Why we are making this change
The community has long requested less frequent major releases due to the impact of breaking changes and upgrades for their projects as well as for enterprise customers. Additionally, a longer release cycle provides increased API stability for developers using agentic workflows, while still delivering a reasonable cadence of API upgrades and migrations.
(cherry picked from commit 25dbe79507)
A leading UTF-8 byte order mark (U+FEFF) before the first `#` stops the
Markdown parser from recognizing the heading, so the guide renders its
title as a paragraph and drops the standard docs header. The character
is invisible, so it cannot be caught in review.
Add a check in the guides generation pipeline that throws when a source
file starts with a BOM, failing the build with the offending file name.
This sits alongside the existing unknown-anchor check and prevents the
regression fixed in #69889 from recurring.
The ng-container and binding template guide files each began with a
UTF-8 BOM (EF BB BF) before the leading `#`. The docs markdown parser
only promotes `#` to an H1 when it is the first character on the line,
so the BOM demoted the title to paragraph text (`<p># ...</p>`) and the
standard docs header (breadcrumbs, page title, edit button) never
rendered.
Stripping the BOM restores `#` as the first character, so both pages
now generate the proper `<header class="docs-header">` block. Verified
by rebuilding //adev/src/content/guide/templates:templates and
inspecting the generated HTML.
Fixes#69889
Twitter is now X. In the custom-route-matcher guide, point the author-credit
link at x.com and refer to an "X (formerly Twitter) handle" (clarified once,
then "X handle"), matching the "X (formerly Twitter)" wording already used in
the footer, navigation, and update guide.
The angle-guessing minigame's result popup personifies your score with a
hand-drawn stick-figure that changes expression by accuracy. Now that Angie
appears across adev — the 404 page, docs search, the embedded editor, the
tutorial intros and completions — give the minigame the same treatment so
its result feels consistent with the rest of the docs.
Replace the result reactor's stick-figure illustration with an Angie pose
keyed to accuracy (seven tiers, superhero down to angry). She is revealed
once the accuracy counter finishes counting up, popping in beside a speech
bubble that carries the round's existing quote. The result popup is widened
so Angie and the bubble sit side by side, and the share link is moved from
twitter.com to x.com.
This removes the previous hand-drawn stick-figure result art. NG the Angle,
the interactive character in the play area, is unchanged.
The tutorial intro and "next steps" pages were plain headings with no
send-off. Bookend each tutorial with Angie: a greeting pose welcoming
learners on the intro page, and a superhero pose congratulating them on
the completion page, each beside a speech bubble.
The bubble treatment from the 404 page lived inside the not-found
component, so it's extracted into a reusable docs-content style
(docs-tutorial-mascot) usable from tutorial markdown, and applied to the
intro and completion pages of the Learn Angular, Signals, and Signal
Forms tutorials.
The "Page Not Found" page always rendered the sentence "We have
initiated a search for the term extracted from the URL", but the
NotFound component only runs a search when a term can be extracted,
and only renders results when there is at least one hit. On a 404
with no extractable term or no matching results, the page asserted
a search it never backed up.
Gate the sentence behind the same searchResults() check that guards
the results list, so the empty state simply reads "We couldn't find
what you were looking for."
The MCP server setup guide linked to /ai/skills, which 404s. The
page lives at /ai/agent-skills. Update the link to point to the
correct route.
Fixes#69838
The `inlineStyleLanguage` build option has existed since v12 but was
never listed in the workspace configuration reference. Add it to the
"Extra build and test options" table alongside the other style options,
documenting its accepted values (css, less, sass, scss) and default.
Fixes#69801
The cookie consent popup showed only text and two buttons. Add the
Angie greeting pose to it so the first thing a new visitor sees carries
the same mascot treatment already used across the docs (the 404 page,
empty search results, the preview error state).
The message and mascot sit in a flex header row; the two action buttons
now share the row equally so they fill the card instead of leaving a
trailing gap. Layout only, the consent behaviour is unchanged.
The error snack bar (the chunk-load reload prompt and the embedded
editor's memory / mobile alerts) showed only text and an action button.
Add an Angie press-kit pose to the left of the message so the failure
state matches the mascot treatment already used for the preview error
card and the empty search states.
The pose is data-driven: ErrorSnackBarData gains a required `pose` field
so each caller picks the mascot that fits the message tone (`greeting`
for the docs-updated reload prompt and the mobile notice, `error` for
the out-of-memory warning). The message moves into a `<p>` that flexes
to fill the row, keeping the action button aligned to the right.
Presentation only; when and why the snack bar appears is unchanged.
PR #68946 removed the "Open in Firebase Studio" (Project IDX) launcher
from the embedded editor, but left its supporting configuration behind:
a per-tutorial `idx/dev.nix` workspace file in seven tutorials, plus an
`'idx'` entry in `excludeFromRoot` whose only job was to keep those
folders out of the StackBlitz/download bundle.
With the launcher gone nothing reads these files anymore, so remove the
seven `dev.nix` configs and the now-dead `'idx'` exclude entry.
The Console tab's error-count badge lives in an `<ng-template
mat-tab-label>`, but the component didn't import `MatTabLabel`, so
Material ignored the templated label and fell back to the plain
"Console" text. Import it so the badge renders when there are errors.
lazerg