Code with Chintan
Published in

Code with Chintan

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.tslook 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 ListQrllook 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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store