How to Hide Ionic Header on Scroll

[Music] what's up everybody welcome to a new quick win and today we're getting into a very interesting pattern uh not a huge functionality but a small improvement that can really spice up your ionic application we will build a cool directive that on scroll allows you to scroll out or fade out at the same time your header status bar or the toolbar and also we will do a second effect for that matter that can bring in the toolbar it's like a bit like the airbnb effect that i've seen in the past so a really interesting thing so let's do this first of all i started with a blank new application so you can easily follow along and then i generated a new module that we will use uh for our directive so that makes it kind of easy to import them in other pages and then simply go ahead and generate two new directives as an ionic academy member you can check out the full source code link below the video otherwise you can just follow along in here so let's get started um first of all i will also bring in my view because i will show you everything on a real device i think that looks a bit better so let's put this to the side and let's take a bit of this um first of all we got our shared directives module if you generate the module first and then the directives afterwards they are already declared but we also need to export them so put in another block exports and then export both directives then we can already close this and move on to the module file of the page where you want to use the directive so let's say we want to use it in home we're going to simply add the shared directives module in here and that's already everything that we need now let's start with the scroll out i think that's the most popular one actually we don't need the home page html but we need not the ts but the html so what i did so far i just added a few buttons to the left and to the end inside the toolbar just to well i saw this in the airbnb application so uh we need a way to change the toolbar and we need a way to listen to the ion content scroll events so what we're going to do is we're going to put in our app hide header in here and now you might ask why where this is coming from well that's automatically the name of your generated directive so if you call it height header angular will add the selector in front of it to make it kind of unique and um well it looks interesting i think i didn't do this was this automatically generated interesting anyway within our header directive we need an input first of all so go ahead with input and we will use a little trick in here so we will give this input the same name like the actual directive and internally we will access it as toolbar and by doing this we can go to our home page and simply use the directive like this so otherwise you would have to add the directive name in here app height header and then perhaps use a toolbar in here and then set this to the toolbar but by giving this property or this input the same name we can actually fuse it with this like a short syntax and we'll just define on the toolbar a reference toolbar and pass this in so now the directive has a reference to our toolbar and we also need to make sure that our ion content outputs all the scroll events because we're listening to scroll events so we will go ahead with scroll events true actually we don't need those brackets so that's already a good start for our header directive um we also need the toolbar hate i will set this in the beginning within our uh height header directive actually let's close everything so you're not confused um toolbar hate 244 that's the hate on ios but we will uh use this also in a different way so we can also calculate the hate it was actually a bit more challenging because it wasn't initially available um but we will get there so we need the renderer to access our dom rendering and we will also inject the dump controller from ionic angular with this dumb controller uh we can more efficiently uh write or read from the dom and that will be used within our ng on init directly so as i said this is really not a great idea because on ios and android the value will be different but we can easily use now the dump controller read and put in some brackets and then set our toolbar height to this dot toolbar dot client hate i tried to use this uh inside ng after viewing it or just ng on init it wasn't working anywhere so it really just works like when the directive has loaded when all the component is finished and using the dom controller read will make the read operation and everything in here like in the next tick so that is a good idea right now the toolbar is actually not completely correct we have the input and the reference to the toolbar but we also need to use from the input the actual element um maybe i could show you how it's looking otherwise um so you don't get confused um can we get like a local host preview for this yes great so right now you see test ion toolbar and here is the actual ion toolbar element so that's why we set our toolbar to this the toolbar element just a quick fix now we got the hate that's great and now the actual uh challenging part begins so the directive was added to the ion content the ion content outputs the ion scroll events and we can listen to them using the annotation host listener and we want to listen to the ion scroll events and there will actually be some information in here we will access this as event or that's actually the name and we can call this on content scroll that's what you usually usually see in other tutorials as well all right we got our function uh we can log the event out and test if we're actually listening to scroll events i think yeah um yeah you see i kinda scroll with my wheel uh it already works we don't have any content in here let's quickly change this for this testing case i added an image to my assets folder so great image and then you can just go ahead within your home page and put in the image because i wanted to have an image and a cards just whatever i really just needed anything so i can scroll this page now we can see we get all the events we can scroll and we want to make the header disappear while we scroll down and we want to make it come back once we scroll back up and in other tutorials i also saw that they use like an animation so at a specific point they completely remove the the toolbar but i felt like well that's so at a specific position this animation takes place and it doesn't really feel natural in usually in applications i see this like more of a natural scrolling you scroll and it also scrolls so it's not happening immediately and therefore we will do this a bit differently first of all we want to access the scroll top um from event detail scroll top that's like the distance um we've scrolled from the top so far i should have just left this open for testing so now we should see we go down and the number increases and once we go back the number decreases back to zero okay with that information we already got enough for our actual animation so um what we want to do is we want to change the position of the header um so let's say new position equals scroll top divided by five so that just uh makes the whole um scrolling a bit more smooth if you take just the raw value it's i think a bit too fast you might even use like eight or ten to make it even slower and then we will also make this a negative number because of course the position should be something like minus 5 minus 10 and finally minus 44. so if our new position is slower than our actual toolbar height for this case just imagine it's 44. if the new position is like -45 that doesn't really make sense we just need to get to -44 to completely hide our toolbar and therefore if we go lower than that value we will just set the new position to minus this dot toolbar hate i hope that's a good explanation so far so then we're gonna use the dom controller once again and this time we're gonna write so previously we read now we're gonna write and we're gonna use the renderer to change the style of our toolbar element and we want to set the top property to um let's do it like this new position um pixel and there we go so let's give this a try um actually i will give it a try on the device and you see actually the toolbar is somehow moving up but that's not really um a great ui i would say so what i also added is a little change to the opacity because then it feels even more natural so let's say a new opacity is 1 minus now another little calculation new position so that's a value between 0 and -44 or for android minus i don't know the value and we divide this by our toolbar height why do we divide it by the toolbar hate it made sense when i wrote this so just trust me this will give you a value between one or so if the new position is zero the opacity will be one that's fine and once we scroll down it will get somewhere close to zero or it will actually be zero at one point so instead of top we will now change the opacity and we will just set it to our new opacity and then the whole animation looks already a lot better the icons kind of fade out you could do this faster or you could do this slower but it's still not 100 great and that's because our image from the background is scrolling behind the toolbar and we actually want to see the image here that will be way cooler and the fix to this is simply go back to your home page and say full screen true so this is a property from ion content that you should set to true when you want to scroll something behind your header and now the animation and you see my image here with the opacity is behind the toolbar and the whole toolbar just fades out and if the user is are using the the application a bit faster you see it just feels natural so the opacity changes and and somehow the status bar is gone if you can implement animation or ux behavior that the user doesn't really notice while it's doing its job then you did it everything correctly so perhaps you could tweak uh the speed of how fast things disappear or you could also change the height of the icons or do anything like this but it's already a great starting point for your application okay now we want to do a second thing and that's a bit different for that i will just comment this one out and use it once again um we still need full screen true we need the scroll events and now we need app fade header and for our app fade header we actually need um i'm a bit confused because i thought i also used the header uh let's quickly do a test because i noticed a different between using the header in here and using the toolbar reference yeah i actually don't notice a huge difference but i thought that using the header in here works even better um i can't say for sure right now maybe give it a more closer test but for our fate header we will definitely use the toolbar because the toolbar has the color and that's what we wanna animate with the fading effect so let's change this to app fade header everything else is still the same now we also need to change the css because what we want to do is and i will leave a little comment in here as well only necessary for the fate header we want to start with the image at the top that's maybe a good idea perhaps for modal dialogues which uh might even not have a toolbar at all and set the toolbar background to transparent and the border color because otherwise you got less ugly border here and we want to make the content start right at the top and now once we scroll down we want to fade in our header we don't want to fade it out now we want to fade it in that's a bit different behavior i saw somewhere in the airbnb application i really like this because right now it's above the image it looks cool but once you get to the content you might want to have a real header so that's really the opposite okay that's our starting css that's using the app fade header and i'll actually copy this code for now to the feed header directive because we're gonna reuse a bunch of this stuff as well in here so let's add all missing imports um this one should be called now app fate header we don't need the hate we don't need the renderer as far as i know because we will directly write to our toolbar inside our oninit we want to do the same like before we want to access the element because it's in here and within the scroll we now need to do a bit different from what we did before actually we can keep the scroll top so um i thought that maybe by a distance of 255 we should see the the status bar completely also i think this made my calculation uh using some hex values a lot easier so feel free to play around with this value so if we've scrolled further than 255 we will just keep it to this value yeah then we should use let instead of const and now the trick is i want to set the background css variable with hex code and for hex code you don't just have uh the six available digits for red green blue we could also have two more for opacity and that's the trick we're gonna use so we're gonna convert our distance um actually why did i use distance and say it's scroll top we're going to convert this to a string and this will be actually a hex string now if you don't trust me let's lock this out hex distance and where's our browser window there we go so now when i scroll down you see this is actually a hex value and this is like the biggest value we can get so with that hex value in place we can once again access our dom controller call right open the function and set on our toolbar the style directly i couldn't make this work with a renderer i'm actually not sure why most likely it was just my incompetence so set property um dash dash background that's the css variable for the background of the toolbar and we're gonna set this to a nice whatever value um i actually found the initial value for light so that's the light color from ionic and we're going to append our cool opacity hex hex dist whatever you want to call it right to the end and with that in place let's check out the phone once again and once we scroll down you see the status bar is coming in and is now at some point at the full call it actually looks a bit bad on my device this is not really why this is a different color not sure why it's always shown wrong but it's a really cool effect um that you can use in some pages perhaps it looks better here let's give it a try now you see it's really the gray we wanted to have or you could also access the buttons within here but now you got really um two ways to optimize your applications you could scroll out and fade out the header on longer pages where the user just needs more space to read your text or in different settings where you maybe have an image like this you could completely hide the toolbar background in the beginning and just slowly show it afterwards this could also be combined with the parallax effect for scrolling out the image a bit uh slower that also looks really great that's the complete effect you see in the airbnb application so if you're interested in that one i will definitely create a quick win just leave a comment below and also leave a like of course as always if you got any other questions check out uh the code link below the video for ionic academy members and if not you know you can always find me inside the ioniq academy so have a great day and take care if you enjoyed this video please hit the like button and stay subscribed so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ioniq academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive slack channel so we can get your app out i hope you enjoyed this video i will see you inside the next video have a great day and happy coding simon

Channel: Simon Grimm

Views: 8,915

Rating: 4.974359 out of 5

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: NHTpZV-Dcw4

Length: 21min 12sec (1272 seconds)

Published: Tue Sep 29 2020

Reddit Comments

[u/L_u_ii]

thanks for sharing , interesting , was looking for it .

[u/ex_in69]

Brother Habib Al Mawali has a great short version of this. Love his content too.

And Simon is lit as always ;)