Pull to Refresh

import { Component } from '@angular/core';
import { WrPullToRefresh } from 'ngwr/pull-to-refresh';

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

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

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
  });
}