Property not known? - Githubissues

markterrill commented 6 years ago

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 commented 6 years ago

Hi @markterrill, thanks for the feedback.

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

markterrill commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Hi @markterrill PR are welcome :)

toriphes / ion-header-scroll-opacity

Property not known? #1