@input ionContentRef shoud be a valid instance of IonContent

[rakeshkumar125]

My header is separate module like below.

<ion-header class="ion-no-border" scrollOpacity [ionContentRef]="mycontent"> <ion-toolbar lines="none" [class.item-background-color]="showToolbar"> <div class="logo" slot="start"> <div class="big-text"> <ion-icon src="/assets/logo.svg"></ion-icon> </div> </div> <ion-buttons slot="end" class=" notificatoin_button"> <ion-back-button [text]="Back" [hidden]="!edited" defaultHref="/home"></ion-back-button> <ion-button [routerLink]="['/notifications']"> <ion-icon class="badge" name="notifications-circle-outline"> </ion-icon> <ion-badge class="badge-one" color="light">{{notification_cnt}}</ion-badge> </ion-button> </ion-buttons> </ion-toolbar> </ion-header>

And above header module call in all pages like below.
<app-header></app-header>

Now I am trying to use this it gives below error.

core.js:4197 ERROR Error: Uncaught (in promise): Error: @input ionContentRef shoud be a valid instance of IonContent
Error: @input ionContentRef shoud be a valid instance of IonContent
at IonHeaderScrollOpacityDirective. (header-scroll-opacity.directive.ts:80:13)
at Generator.next ()

[toriphes]

Hello @rakeshkumar125
I haven't tested this kind of scenario but it looks like you need to pass the IonContent instance as @Input of your app-header component.