If you're new to angular 1, it's worth familiarizing yourself with the basics before diving into angular2. As angular2 is still in its early stages, you may need to implement some features that are not yet available.
For now, I've put together a simple implementation of the initial library you provided.
@Component({
selector: 'ptr-container',
styles: [`
:host {
display: block;
max-height: 50px;
overflow: auto;
}
`],
template: `
<section [hidden]="!inProgress">
refresh in progress ... (change it by your own loader)
</section>
<ng-content></ng-content>
`
})
export class PullToRefreshComponent {
private lastScrollTop:number = 0;
private isAtTop:boolean = false;
private element:any;
@Input('refresh') inProgress:boolean = false;
@Output() onPull:EventEmitter<any> = new EventEmitter<any>();
constructor(el:ElementRef) {
this.element = el.nativeElement;
}
private get scrollTop() { return this.element.scrollTop || 0; }
@HostListener('scroll')
@HostListener('touchmove')
onScroll() {
if(this.scrollTop <= 0 && this.lastScrollTop <= 0) {
if(this.isAtTop) this.onPull.emit(true);
else this.isAtTop = true;
}
this.lastScrollTop = this.scrollTop;
}
}
Here's a simple example of how to use it
@Component({
selector: 'app',
template: `
<ptr-container (onPull)="onPull()" [refresh]="isInProgress"></ptr-container>
`
})
export class AppComponent {
isInProgress:boolean = false;
onPull() {
this.isInProgress = true;
}
}
I haven't thoroughly tested the basic library, but it should work. You may need to debounce the onScroll method to prevent excessive event triggering.
Hope this information proves helpful.