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.
(cherry picked from commit 6a3487f7b7)
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.
(cherry picked from commit d5e0b131ed)
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.
(cherry picked from commit f6a00ffde5)
Fenced shell code blocks prepended a `$` prompt to every rendered line via a CSS `::before`, including blank lines are not commands to run.
(cherry picked from commit aca7371431)
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.
(cherry picked from commit f94da4d5ca)
When the embedded editor fails to boot the preview sandbox, the error
card showed only a text message. Add the press-kit Error pose above the
message so the failure state matches the mascot treatment already used
for the loading steps and the empty search states.
The card is also centered in the preview pane (previously pinned 5% from
the top) so the pose and message read as one block. Behaviour is
unchanged; this is presentation only.
(cherry picked from commit 72cc548d34)
The search dialog picked its empty state ("Start typing" vs "No results
found") with `!resultsResource.hasValue()`, which during a re-query looks
identical to a freshly opened dialog since the resource resets its value and
reports `loading`. This flipped the message and mascot back to "Start typing"
mid-search, causing a question -> magnifying-glass -> question flicker on every
keystroke. Add an `emptyState` signal that holds the previous state while a
search is settling, so the dialog only changes once results resolve.
(cherry picked from commit e6378eb330)
The ng-add walkthrough references two files it never shows: the
collection points to `ng-add/schema.json` and `index.ts` imports its
`Schema` interface from `ng-add/schema.ts`. Add the missing code blocks,
mirroring the generation-support section, so the example is complete.
Fixes#57005
(cherry picked from commit 454af71609)
While the embedded editor's preview sandbox boots, the pane shows a plain
text label for each step (Booting, Creating project, Installing packages,
Initializing dev server). Add an Angie pose above the label so the wait
tells a small story. Behaviour is unchanged; this is presentation only.
Poses map to the existing LoadingStep values:
Starting / Booting / Creating project -> greeting
Installing packages -> coding-01
Initializing dev server -> superhero
The mascot sits in a fixed-size box (object-fit: contain) so swapping
poses of different aspect ratios never shifts the label or progress bar.
(cherry picked from commit c92d995260)
Add a dedicated error reference page for NG05703 (suspicious URL origin
change during SSR) and update the error to use RuntimeError with a
negative code so the error message automatically includes a link to the
docs page in both dev and production builds.
Update affected tests in url_spec.ts, platform_location_spec.ts, and
integration_spec.ts to match the new NG05703-prefixed error message
format.
Fixes: #69667
(cherry picked from commit 13b6bbd6a0)
Replaces the plain "Page Not Found" text with the sad Angie mascot
speaking the message from a speech bubble, for a warmer, more on-brand
not-found page. Copy is unchanged and the "Feeling lucky?" search
results are untouched.
The sad pose is added as an SVG asset (cropped tight to the artwork) under
assets/images/angie/. The mascot is decorative (aria-hidden), and it scales
down to stay beside the bubble on mobile.
(cherry picked from commit 3ac2c7b2bc)
The popup service example framed the comparison against a vague
'previously you had to define a dynamic component' workflow and pointed
readers at steps no guide describes. Compare against today's
programmatic rendering approach with createComponent instead, which is
what the accompanying example actually uses, and link to the
programmatic rendering guide.
Also remove the note about excluding the component from compilation,
which no longer applies to standalone components.
Fixes#55148
(cherry picked from commit eac04cfb16)
Several adev states show only plain text today. This brings the Angie
mascot into them for warmer, more on-brand empty states, with no change
to copy or behavior:
- Search dialog: a magnifying-glass Angie on "Start typing to see
results", a questioning Angie on "No results found".
- API reference: a questioning Angie on "No API items found." and on the
package filter's "No results found".
- Deprecated API pages: the back-turned orthos pose in the shared
deprecation warning.
The mascots are decorative (aria-hidden) and sized per placement; the
poses are added as SVG assets under assets/images/angie/.
Also moves the Shiki highlighter init in the jsdoc-transforms spec into a
beforeAll, fixing a flake where the spec failed under randomized test
order.
(cherry picked from commit 95fbd0bd48)
Add a new section for 'Form State Signals' in the signal forms essential guide. This documents global signals such as dirty(), valid(), invalid(), pending(), and touched() at the form level, as requested in issue #69544.
Fixes#69544
(cherry picked from commit 43996cf748)
Adds build-time validation to catch broken, stale, or miscased internal documentation links in both JSDoc and markdown, including `/api/` and `/guide/` URLs and their fragments. Updates the documentation pipeline to share the canonical route manifest, ensuring that all references are checked against the current navigation structure.
(cherry picked from commit c1829f6d7c)
On mobile, focusing a long nav item shows a matTooltip that escapes the
drawer, ignores inner scroll, and blocks scrolling while open. Suppress
it on mobile using the existing isMobile helper.
(cherry picked from commit 5ec0b1668b)
Backdrop clicks on the search dialog were also closing the open mobile nav drawers. Adds an id to `<dialog>` and references it from both navs' `docsClickOutsideIgnore` arrays.
(cherry picked from commit 4b0c066e22)
Adds a link to Angular's official mascot, Angie! Community members can now have access to Angie for use that falls within the community guidelines.
(cherry picked from commit c587555fdd)
Correct a mismatched line highlight in the documentation examples
and convert tags to the preferred self-closing format for consistency.
(cherry picked from commit 81dd9d6091)
Any custom Signal Form control
[will actually work](https://github.com/angular/angular/issues/69074#issuecomment-4601225278)
in both Reactive and Template-Driven form contexts. However, this is not obvious
from reading the docs. This PR points this out very explicitly in both the
migration and custom control guide for Signal Forms.
One notable advantage of this interoperability behavior is the ability to
migrate existing `ControlValueAccessor` controls without breaking users. I've
pointed this out separately.
(cherry picked from commit 19a66dcc15)
Adds a reference page for `NG05200`, thrown by `DomSanitizer` when a value is bound to a `<script>` element without being marked trusted via `bypassSecurityTrustScript`. Covers why Angular rejects script content outright, how to reproduce the error, the escape hatch, and the XSS caveat.
(cherry picked from commit 806a3ada26)
Clicking "Refresh" toggles the list out of and back into the DOM, but the
`<ul>` lived inside the `@if`, so removing it collapsed the layout and
caused a vertical jump. Wrap the list in a fixed-height `.items-container`
to reserve the space while it re-mounts. Also key the stagger delay off
`$index` so the first item animates immediately instead of being delayed a
step.
(cherry picked from commit cd8351a3af)
The link on the "develop with AI" page wrapped the verb phrase "to check
out the overview page" in the link text, burying the destination in a
call-to-action. Per the adev writing guide's descriptive-link-text rule,
link only the noun that names the destination.
Change the link text to "overview page" so it clearly indicates where the
link goes.
(cherry picked from commit 42fc9a4599)
The search dialog (Cmd/Ctrl+K) opens as a native modal via `showModal()`, but the
page behind it stayed scrollable, so scrolling drifted the underlying content
beneath the blurred backdrop.
`body` already reserves a stable scrollbar gutter, so setting `overflow: hidden`
while the dialog is open blocks background scrolling with no layout shift. The rule
keys off the dialog's `[open]` state, so it restores automatically on every close
path (Escape, click-outside, navigation) with no script involved.
(cherry picked from commit 551cb3b8b5)
The "Prefer" / "Avoid" code block headers rendered the style label as
plain inline text joined to the title with a bare "-" separator, giving
the two block types little visual distinction. The taller label also left
the prefer/avoid header at a different height from the plain filename
header, so the copy button's single "top" value could not center it in
both.
Style the label as a small uppercased pill tinted with the block's style
color, drop the "-" separator, add a subtle inset accent under the header,
and swap the heavier "dangerous" icon on "Avoid" for "close". Give every
header a fixed height with box-sizing: border-box and vertically center
its contents so all variants render at the same height and the copy button
stays centered.
This supersedes #69638, folding in its centering fix for the copy button
offset that #69030 introduced.
(cherry picked from commit 95a953145e)
Fenced code blocks between list items in NG0912.md were not indented,
causing Marked.js to treat them as top-level block elements that
interrupt the list. This resulted in two separate <ol> elements being
rendered instead of one.
Indent the code blocks by 4 spaces so they are treated as continuation
content of their list items, and change the second `1.` to `2.` for
correctness.
(cherry picked from commit 9153515422)
The active docs tab applied a 2px bottom border that inactive tabs lacked,
which shrank the active label's content box and clipped its descenders. It
also set `line-height: 1.5` only on the active label, so switching tabs
nudged the text. Reserve the border as transparent on every tab and recolor
it on the active one, and share the label `line-height`, so the letters are
no longer cut and the label stays put when switching.
(cherry picked from commit 12a4e60a4a)
Angular Robot