AngularLynx

    <refresh>

    Pull-to-refresh: pulling down on its content reveals a header you design, then fires an event so you can reload.

    element-refreshsrc/app/app.ts

    Usage

    src/app/feed.ts
    import { Component, ElementRef, viewChild } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-feed',
  imports: [LYNX_ELEMENTS],
  template: `
    <refresh #refresher (bindstartrefresh)="reload()">
      <refresh-header>
        <view
          style="height: 60px; align-items: center; justify-content: center;"
        >
          <text>Refreshing…</text>
        </view>
      </refresh-header>
      <scroll-view scroll-orientation="vertical" style="height: 100vh;">
        <text>Pull down</text>
      </scroll-view>
    </refresh>
  `,
})
export class Feed {
  readonly refresher = viewChild.required('refresher', { read: ElementRef });

  reload(): void {
    // Load your data, then hide the header: it stays open until finishRefresh.
    this.refresher().nativeElement.invoke?.('finishRefresh');
  }
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    enable-refreshbooleantrueWhether pulling down, or calling autoStartRefresh, starts a refresh.

    Plus the common attributes, such as id, class and style.

    Events

    Read the payload from $event.detail (see Handling taps and events).

    EventdetailDescription
    bindstartrefresh{ isManual: boolean }A refresh started. isManual is true when the user pulled. Reload, then call finishRefresh.
    bindheaderoffset{ isDragging: boolean; offsetPercent: number }The header moved. offsetPercent is the pull distance divided by the header's height. Use it to animate the header.
    bindrefreshstatechange{ state: 0 | 1 | 2 }The header's state changed: 0 idle, 1 pulled far enough to release, 2 refreshing.

    Plus the common events, such as bindtap.

    Methods

    These UI methods (Glossary) start and end a refresh from code. Call them with invoke() on the element (see Call element methods), as the Usage example does with finishRefresh.

    MethodParametersDescription
    finishRefresh—Ends the refresh, and the header slides away. Call it after every bindstartrefresh.
    autoStartRefresh—Shows the whole header and fires bindstartrefresh, as if the user had pulled.

    Children

    Give <refresh> two direct children, in this order:

    1. <refresh-header>: the header the pull reveals.
    2. One scrollable element, such as a <scroll-view> or a <list>.

    Only vertical pulls are supported.