Ionic fast scroll

fast-scroll.scss

fast-scroll {
  position: fixed;
  top: 102px;
  right: 5px;
  padding: 10px 5px;
  background: #f8f8f8;
  border-radius: 10px;
  border: 1px solid #ddd;

  span {
    display: block;
    margin-bottom: 70%;
  }

  a {
    text-decoration: none;
  }
}

.fast-scroll-container {
  text-align: center;
}

fast-scroll.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'fast-scroll',
  template: `
    <div class="fast-scrollr-container">
      <span *ngFor="let index of indexes"><a href="#{{index}}">{{index.toUpperCase()}}</a></span>
    </div>
  `,
})
export class FastScroll {
  @Input() indexes: string[];
}

keys.pipe.js

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'keys'})
export class Keys implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

selector.ts

// One dimensional array
let myContacts = [{}...{}];

// One dimensional array but sorted by last name
let contactsSorted = myContacts.sort(compare);

// Two dimensional array sorted and grouped by last name
let contactsGrouped = groupByLastname(contactsSorted);

const compare = (a,b) => {
  if (a.lastName < b.lastName)
    return -1;
  if (a.lastName > b.lastName)
    return 1;
  return 0;
}

const groupByLastname = (contacts) => {
  var contactsGrouped   = [],
      tmpArray          = [];

  for (var i = 0; i < contacts.length; i++) {

    if (i !== 0 && contacts[i].lastName.charAt(0).toLowerCase() !== contacts[i - 1].lastName.charAt(0).toLowerCase()) {
      contactsGrouped[contacts[i - 1].lastName.charAt(0).toLowerCase()] = tmpArray;
      tmpArray = [];
      tmpArray.push(contacts[i]);
    } else tmpArray.push(contacts[i]);

    if (i == contacts.length - 1 && contacts.length !== 1) {
      contactsGrouped[contacts[i - 1].lastName.charAt(0).toLowerCase()] = tmpArray;
      tmpArray = [];
    } else if (contacts.length == 1) {
      contactsGrouped[contacts[i].lastName.charAt(0).toLowerCase()] = tmpArray;
      tmpArray = [];
    }
  }

  return contactsGrouped;
}

smart-component.ts

import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {Keys} from '../common/pipes/keys.pipe';

import {FastScroll} from 'MY_PATH/fast-scroll';

@Component({
  template: `

    <ion-header>
      <ion-navbar hideBackButton="true">
        <ion-title>Contacts</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <div *ngFor="let contactSet of contacts | keys">
          <ion-item-divider light id="{{contactSet.key}}">{{contactSet.key.toUpperCase()}}</ion-item-divider>
          <ion-item *ngFor="let contactItem of contactSet.value"></ion-item>
        </div>
      </ion-list>

      <fast-scroll [indexes]="Object.keys(contacts)"></fast-scroll>
    </ion-content>
  `,
  directives: [FastScroll],
  pipes: [Keys]
})
export class ContactPage {
  @Input() contacts;

  constructor() {}
}