Newlyweds Proposing Marriage

    ionic2-alpha-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    ionic2-alpha-scroll

    Configurable Ionic 2 component for alphabetically indexed list with an alpha scroll bar. This component has a few improvements on the original Ionic 1 component, mainly the panning functionality on the alpha wheel scroll shown below in the demo.

    NPM

    Installation

    1. Use npm to install the component
    npm install ionic2-alpha-scroll --save
    1. Add the ionic2-alpha-scroll component to your app.

    Include the following on your src/app/app.module.ts.

    import { IonAlphaScrollModule } from 'ionic2-alpha-scroll';
     
    @NgModule({
      declarations: [
        MyApp,
        ...
      ],
      imports: [
        IonicModule.forRoot(MyApp),
        IonAlphaScrollModule
      ],
      ...
    })

    Demo

    Here is a sample Ionic 2 app on GitHub that shows how to use this component Animated

    Usage

    To use the ion-alpha-scroll component add this below to the <ion-content> in your template:

    <ion-alpha-scroll *ngIf="breeds"
      [listData]="breeds"
      key="name"
      [itemTemplate]="alphaScrollItemTemplate"
      [currentPageClass]="currentPageClass"
      [highlight]="true"
      [triggerChange]="triggerAlphaScrollChange">
    </ion-alpha-scroll>
    • listData is the model you would like to sort. Use an array of objects here.
    • key is the name of the key you would like to sort by.
    • itemTemplate is the reference to the template to display for the properties of each item in the model.
    • currentPageClass is a reference to the instance of the current current page class (see example below). This is needed so that bindings on the itemTemplate can refer to the Ionic 2 page class containing the ion-alpha-scroll.
    • highlight can set to true or false to highlight the current letter in the sidebar.
    • triggerChange can be any property you want that can be changed to trigger ngOnChange for the ion-alpha-scroll component. If listData was modified the alpha list will reflect that after triggering the change.

    Heres a quick example:

    @Component({
      selector: 'alpha-list-page',
      template: `
        <ion-header>
          <ion-navbar>
            <ion-title>Dog Breeds</ion-title>
          </ion-navbar>
        </ion-header>
     
        <ion-content class="alpha-list-page">
          <ion-alpha-scroll
            [listData]="breeds"
            key="name"
            [itemTemplate]="alphaScrollItemTemplateRef"
            [currentPageClass]="currentPageClass"
            [triggerChange]="triggerAlphaScrollChange">
     
              <ng-template #alphaScrollItemTemplateRef let-item>
                <ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
              </ng-template>
     
          </ion-alpha-scroll>
        </ion-content>
      `
    })
    export class AlphaListPage {
      breeds: any;
      currentPageClass = this;
      triggerAlphaScrollChange: number = 0;
     
      constructor() {
        this.assignBreeds();
      }
     
      onItemClick(item) {
        // This is an example of how you could manually trigger ngOnChange
        // for the component. If you modify "listData" it won't perform
        // an ngOnChange, you will have to trigger manually to refresh the component.
        this.triggerAlphaScrollChange++;
      }
     
      assignBreeds() {
        this.breeds = [
          {
            'name': 'Affenpinscher'
          },
          {
            'name': 'Afghan Hound'
          },
          // ...
        ];
      }
     
      // ...
    }

    If you would like to disable the scroll bar for the ion-alpha-scroll scroll-content use this CSS:

    .ion-alpha-scroll .scroll-content::-webkit-scrollbar {
      display: none;
    }

    Acknowledgements

    https://github.com/aquint/ion-alpha-scroll

    License

    MIT

    Install

    npm i ionic2-alpha-scroll

    DownloadsWeekly Downloads

    35

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    1.81 MB

    Total Files

    20

    Last publish

    Collaborators

    • rossmartin