Property not known?

[markterrill]

Hi, thanks for doing this directive, its exactly what I was looking for!

I did bump into something weird that an hour of Google didn't solve.

Template parse errors:
Can't bind to 'scrollArea' since it isn't a known property of 'ion-header'.

My html:

<ion-header class="home-common" color="sdbredfg"  header-scroll-opacity [scrollArea]="mycontent">
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon class="icon-menu" name="menu" color="sdbredfg"></ion-icon>
        </button>
        <ion-title color="sdbredfg">Preparation</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="page-guide home-common" no-padding #mycontent fullscreen>

So it seems to be objecting to having added [scrollArea] as a property, which makes sense..

There was another article (https://medium.com/@gregor.srdic/ionic3-hidding-header-on-footer-on-content-scroll-15ab95b05dc5) that in the comments had similar issues.

ps, in your docu you say to use it in the app.module.ts declarations, though that errors, and logically should be as an import...

[toriphes]

Hi @markterrill, thanks for the feedback.

Are you using the directive inside a page module in ionic 3?

[markterrill]

Haha!

Yes, that's the simple solution. Lazy loaded pages with their own pagename.module.ts means I need to import the module there as well.

guide.module.ts

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {PipesModule} from "../../pipes/pipes.module";

import {GuidePage} from './guide';

import { IonHeaderScrollOpacityModule } from 'ion-header-scroll-opacity';

import {ExpandableComponentModule} from '../../components/expandable/expandable.module';

@NgModule({
    declarations: [GuidePage],
    imports: [
        IonicPageModule.forChild(GuidePage),
        PipesModule,
        ExpandableComponentModule,
        IonHeaderScrollOpacityModule
    ],

    entryComponents: [
        GuidePage
    ]
})
export class GuidePageModule {}

[markterrill]

Incidentally, in your ngAfterContentInit, it seems there is a more efficient way to handle the scroll events that plays nicely with the dom update cycle.

// listen for ion-content scroll event
        this.scrollArea.ionScroll.subscribe((ev) => {
            if (ev){
	            ev.domWrite(() => {
		            _this.changeOpacity();

	            });
            }
        });

By wrapping it with that domWrite function it throttles the number of events and means its aligns with a dom cycle. https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/

I'd submit a push request if it was more complex.

[toriphes]

Hi @markterrill PR are welcome :)