Anchor

import { WrAnchor } from 'ngwr/anchor';

@Component({ imports: [WrAnchor] })
export class MyComponent {}

<wr-anchor [links]="links" [offset]="80" />

Anchor watches the page scroll and highlights the closest section.

Pass an array of { id, label } and the component does the rest.

Children render one level of nested links.

See the component reference below.

Name	Description	Type	Default
`links`	—	`readonly WrAnchorLink[]`	`[]`
`ariaLabel`	Accessible name for the navigation landmark. Falls back to `anchor.label`, then `'Table of contents'` — it used to be that English string, hard-coded on the host, in a landmark a screen reader reads out on every page.	`string \| null`	`null`
`offset`	Pixel offset subtracted on scroll — for sticky headers.	`number`	`0`
`hitArea`	Highlight an item when its target's top is within this many px of the offset line.	`number`	`80`

interface WrAnchorLink {
  id: string;
  label: string;
  children?: readonly WrAnchorLink[];
}

Name	Description	Type	Default
`WrAnchorLink`	One entry in the rail.	`interface`	—
`id`required	Target element id (without #).	`string`	—
`label`required	Visible text.	`string`	—
`children`	One level of nested links.	`readonly WrAnchorLink[]`	—

Installation