# Anchor

> Scroll-spy in-page navigation. Click a link to smooth-scroll; the closest visible heading auto-highlights.

Source: https://ngwr.dev/reference/components/anchor

## Installation

```angular-ts
import { WrAnchor } from 'ngwr/anchor';

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

## Demo

The anchor below tracks the headings as you scroll the showcase page. Spacers between sections give the scroll-spy something to react to.

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

## API

Inputs of \<wr-anchor>.

| 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` |

## Types

Data shapes used by the inputs above.

```angular-ts
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[]` | — |