<file_sep>import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import * as faker from 'faker';

/*
  Generated class for the Agenda provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Agenda {

  constructor() {}

  getContacts():Contact[]{
    let contacts = [];
    for(let i=0; i< 500; i++){
      let contact:Contact ={
        name:faker.name.findName(),
        phone:faker.phone.phoneNumber(),
        imgUrl: faker.image.avatar()
      }
      contacts.push(contact);
    }

    contacts.sort((a:Contact, b:Contact)=>{
      if (a.name < b.name)
        return -1;
      if(a.name > b.name)
        return 1;
      else return 0;
    });
    

    return contacts;
  }

}

export interface Contact{
    name:string,
    phone:number,
    imgUrl:string  
}

<file_sep># Ionic 3 Virtual Scroll example

This project is an example showing how to use Ionic 3 virtual scroll feature, with custom header dividers.

For more info, visit the blog post about this code: [http://blog.enriqueoriol.com/2017/06/ionic-3-virtual-scroll.html](http://blog.enriqueoriol.com/2017/06/ionic-3-virtual-scroll.html)

## Install

Execute in terminal `npm install`
If you don't have ionic CLI installed, run also `npm install -g ionic`


## Run

Execute in terminal `ionic serve`
<file_sep>import { Component, OnInit } from '@angular/core';
import { Agenda, Contact } from "../../providers/agenda";

@Component({
  selector: 'page-contacts',
  templateUrl: 'contacts.html'
})
export class ContactsPage implements OnInit {

  public items:Array<Contact> = new Array<Contact>();

  constructor(public agenda: Agenda) {
  }

  ngOnInit(){
    this.items = this.agenda.getContacts();
  }

  checkInitialChange(item, itemIndex, items){
    if(itemIndex == 0)
      return item.name[0];

    if(item.name[0] != items[itemIndex-1].name[0])
      return item.name[0];
    
    return null;
  }

}
