Ionic4 hide header on scroll.

How to hide header on content scroll in Ionic Framework.

How to hide header on content scroll in Ionic Framework is working!

Follow these👇 simple steps to make this happen…

Run following command in your terminal within Ionic project directory:

ionic g directive directives/hide-header

Where g is a short form of generate. You may replace directive/hide-header with your own path and name. So directives is a folder in which a directive with name hide-header will be created.

Note: if you would use the CLI command ionic g directive to create the directives/hide-header, don’t forget to remove its automatic entry in the module of your application (app.module.ts ) because later we will add that in ‘SharedModule' and then it throws an error! So remove ‘HideHeaderDirective' from 'app.module.ts'

Now, put the following code in your hide-header.directive.ts👇

After that, in your template — open the HTML template in which you want to hide header on scroll and make following changes…

<ion-header #header>
    <ion-toolbar><ion-title>Test</ion-title></ion-toolbar>
</ion-header>
<ion-content scrollEvents="true" appHideHeader [header]="header">
</ion-content>

The last one [header] attribute takes the header element as argument, in this case #header.

( Before it gets working we need to add SharedModule in Module of its component, to do so follow along… 👇👇 )

Now, If we want to use the directive ( hide-header.directive ) for more than one directive, we need to create a SharedModule.

To do so, create the module with command: ( yes ng is a command keyword used in Angular )

Install @angular/cli if you get an error: 'ng' is not recognized as an internal or external command.

npm install -g @angular/cli

After installing Angular CLI create module…

ng g module shared

After that, add the HideHeaderDirective to the declarations and the exports array of this new file shared.module.ts — look code below at line no. 9 and 10👇

Now we can add the SharedModule to all the modules we want to use the directive in.

Note: We cannot import the SharedModule directive in app.module.ts and use it in a submodules! We have to import the shared module in every module we want to use the directive in.

Like I added SharedModule in ListQrlPageModule of my component ListQrl— look below at line no. 8 and 22👇

Look below at line no. 8 and 22

Now, the header of this ListQrlPage component will be hidden on content scroll — look the magic below👇 hiding header on content scroll 😍

How to hide header on content scroll in Ionic Framework is working!

That’s it for how to hide header on content scroll in Ionic Framework.
Enjoy 👨‍💻

Creating a Masonry grid or Pinterest layout in Ionic Framework.. two steps to create responsive image grid layout in Ionic Framework… 👉 Click here

Simple two steps to create responsive image grid layout in Ionic Framework… 👉 Click here

Creating a Masonry grid or Pinterest layout in Ionic Framework..

If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…

Learn More