# Pull to Refresh

> Drag down from the top of a scrollable area to trigger a refresh — a touch gesture that lives beside native scrolling.

Source: https://ngwr.dev/reference/components/pull-to-refresh  
Kind: Component

## Installation

```angular-ts
import { WrPullToRefresh } from 'ngwr/pull-to-refresh';

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

## Basic

Pull down from the very top on a touch device and release past the threshold to fire `refresh`; a light haptic tap marks the arming point. It's a controlled spinner — bind `refreshing` and clear it when the work settles. No touch device handy? The button drives the same `refreshing` state programmatically.

```angular-html
<wr-pull-to-refresh
  style="height: 16rem"
  [refreshing]="loading()"
  (refresh)="reload()"
>
  @for (item of items(); track item) {
    <div class="row">{{ item }}</div>
  }
</wr-pull-to-refresh>
```

```angular-ts
protected readonly loading = signal(false);

reload(): void {
  this.loading.set(true);
  this.api.fetch().subscribe((rows) => {
    this.items.set(rows);
    this.loading.set(false);   // clearing `refreshing` closes the indicator
  });
}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `refreshing` | Whether a refresh is in flight — drives the spinner. Set true in `refresh`, false when it resolves. | `boolean` | `false` |
| `threshold` | Pull distance (px) a release must reach to trigger. | `number` | `64` |
| `disabled` | Disable the gesture entirely. | `boolean` | `false` |
| `(refresh)` | Fires when the user pulls past `threshold` and releases. | `void` | `—` |