Ionic2 shrinking header/scroll sista alternative?

Have anyone implemented a shrinking header like instagram? ie, similar to Scroll Sista



I’m guessing/hoping Ionic will eventually build this in as official option. Looks like they tried it for v1 but I think it was too buggy.

Is there anything out there by now? Anyone?

Hi guys,

Here is the code I am using. I am new to ionic 2 so feel free to make improvements.

So, here are the steps to get it working:

Place the following in the .ts file you need the header shrinker.

Import shrink.ts

import {Shrink} from ..

Add provider

  templateUrl: 'build/pages/mypage/mypage.html',
  providers: [Shrink]

Add ViewChild

export class SomeClass {
@ViewChild(Content) content: Content;

Add Shrink to constructor

constructor(private header: Shrink) {

Add funcion

ngAfterViewInit() {

In your .html add the following to ion-header

<ion-header [ngStyle]="header.returnStyle()">

You may want to add fullscreen to your ion-content

<ion-content fullscreen>

Place shrink.ts in your project to import it

I’ve created a directive which is up on NPM and could use some testing.

Ionic Shrinkage