Building a Deliveroo Food Ordering UI with Ionic

what's up simonix and welcome back to a new build with ionic tutorial today we're replicating the deliveroo food ui because that's one of the many food applications that i found that looks really good with ionic angular we're gonna get into a lot of custom directives pellets uh images headache directives css custom components well really there's everything in this video if you want to follow along i really recommend you follow the link below to my blog which has all the code for this uh tutorial since we're gonna need a lot of code and i will sometimes bring in a few snippets because i guess the video will be quite long if you haven't checked it out also take a look at the ionic academy my place to help you with everything ionic so you can become a real ionic pro and for today let's heat into our ionic food ordering [Music] application all righty then let's get started with the application uh first of all you're gonna need a new project and one additional page actually we just need two pages so the default one and the details page for this application and we need two directives to transform the headers uh within our pages so that's really everything you need today uh one quick look at the application that we're gonna build so this is the delivery application that i found so far uh we will especially take care of building these different uh slider sections right here based on some dummy data uh we're gonna implement this little header change animation not 100 with everything but at least with a bit of this so it will be quite nice and then once we are inside um one restaurant we're gonna develop this header area so we got this parallax image we got this title which changes into the top area and makes the whole bar uh actually white in the background and this list of meals and also this nice little flip between those sections so you can actually click on those sections and automatically uh slide to them or when you're scrolling the list it will also change at some point so that's what we're gonna do for today um you set up your application in the meantime hopefully uh what we need as well is uh the app module because we're gonna inject the hdp client module uh so we can make it a request to the dummy files that i've hosted once again link below the video you should definitely follow along and once you're done with the app module you can also open the app routing it should now look like this uh you should have a home page and you should have a details page uh we're not getting into routing and showing different menus really that's just super easy you could just have like an id here and then retrieve the right information for one restaurant that's really not super interesting and not the topic of the build with ionic series now let's get into our shared directives modules so we can prepare this um both directives should be added to declarations but they also need to be inside the array of exports so our other pages can import them and before we forget about it let's just quickly do this on our home module we're gonna add the shared directives module and on the details page uh there it already is so those are the two places where we need our shared directives module now let me quickly show you um the json that i've prepared so we got a little json file for the home page that's actually not the home page that was the second one that's the home page uh we got different categories just like we've seen within our reflector app we have the different categories up here uh we have the featured section with two entries and we have the highlights which is this area or the big images then once we move into one um market no one restaurant we got basically everything in here name rating ratings image distance some text some about text and then the food uh split up in different categories once again i just got those two files but that should be enough for today to display our little application what we need as well is the ionic color generator i had it open somewhere right here i added a few colors in here and generated a little new snippet for our configuration so once you insert the colors you can grab this route and then you can put it into the theme variables scss and i'm just gonna replace this once again whenever you're not sure where i got that code from follow along with the tutorial link below so now i got a different primary color i actually don't know if it changed i think i changed the light color and the medium color as well okay a lot of preparation but we're not yet completely finished because i also wanted to include a custom font uh and so i downloaded a file which i think was actually used i'm not completely sure but i think it was the plex font so you can download it from google fonts i found it right here it looked basically like the font used within a delivery application or perhaps i saw it in the source code and then you can put it into your assets funds folder and i just used the normal font and the bold font and then i've set them for the ion font family right here and also globally changed our ion text color because in most places i found this slight gray color for the text so that makes life a bit easier and we can then change it back to black whenever we need it great with that in place i think we can heat over to our first page which is the home page let's open everything page css typescript we're already done with the module and maybe we can also do this now side by side with our application either on the browser or on my device let's do it with a browser for now and there we go okay looks almost good i could need a shortcut for that as well but maybe in the future so what i've added so far is a simple http request to get our home json which gives us the categories highlights and the features that's basically all data we need right now so we can go into our home page uh we will leave the header area for later that's going to be a bit more complicated so let's just get started with a few ion slides all of them are a tiny bit different so we're gonna need options for all of them the first one will be the category slide options and we're gonna iterate ion slide ng for let cat of categories and maybe i should have put a lock in here we can still do this okay no i don't see the lock right there's my object so categories consists always of an image and tile that was pretty easy okay so uh for the categories i just want to display an image we could use ion image we could use image uh let's just go with an image for today and let's use category image we also need the category slide options so if we take a look at the implementation maybe we should really just have taken the application to the side here if we take a look at this application in the categories on this page we see that this is basically a free free mode so they are not locked these are locked slide they always lock in place these are free slides so for the category slide options uh we're gonna say free mode true we also gonna have multiple in one view so let's say slides per view uh 3.5 that's basically what we see right here we got a little bit of offset before we can add this in here as well slides offset b4 let's use 11 i think that's 11. and then we got a little bit of space uh between is this just called space between i think so let's set this to 10. let's hit save and let's check it out i'm going to close this and make it a bit smaller and then we got our free mode first slides up there that actually looks pretty good um they already had around borders so that made life a bit easier a little cheat in there maybe really the preparation for this took so long um i took a few a very few shortcuts and i hope you're fine with that next one should be highlight slide options those are the options which um no they're not the options um the second slide right here so we're gonna lock them in place i think it's actually not two interesting the setup is once again the same and now for the highlight slide options we're going to use mostly the same values slides per view as we can see the slides just show a tiny bit of the next slide a bit of space between just like before but now we also want to say centered slides um and also loop because if you check out the real application you see that we can loop through them and that's exactly what we can do now as well we can go to both directions uh we should actually see a little bit of the next slide already uh we don't see a lot in here um maybe we'll open it on a device as well so we can take a look here that's how it's looking right now on a device maybe we can fix this with a bit of margin why can't i loop through them did you not update yourself hello or did i just not assign them though i did i did maybe we can fix this from our from our css now let's part if we check out the application again is a little header i want to just use an ion text color dark once inline should be fine right i usually use css but sometimes well ah let's not talk about this today okay and then we have the third one ion slide options uh this time we call them featured slide options those are basically like the first one i think so ion slide with a little link because those should actually open our uh details page can we have a break so of featured class featured slides we're going to give them a little bit advanced styling because that's going to be necessary for that application and then within them we're going to first put our image that was within the view maybe i really need both applications open the original one and our application but it should work like this um oh we haven't defined the featured slide options but we will do this in a second of course i can't scroll in here but i can scroll here so we got the image and now just uh really boring the information uh we got the text for the name we got a star we can use ion icon and use our primary colors or secondary colors uh we got the rating and ratings everything's basically from the json and then we got another icon which makes everything now look like this it doesn't really look like it should look uh did we set the we set the the font color didn't we where's my font where's my dark background hmm maybe um maybe maybe yeah so if we just put it into ion slides it's not working very well the text will be behind the image so we're gonna have to use custom classes to make this once again a flex layout so let's heat over to the home css node we still need the featured slide options which will be pretty easy once again free mode um we're going to use slides for view 1.2 just to show a little glimpse of the next one and a bit of space between between them once again so let's move over to our css file because all of the ion slides really need a lot of padding we're going to need padding left and right and we also need a bit margin to the top and bottom that will give the whole ui already a lot better visuals really you see what this change made to the page if i comment this out it really looks horrible and you think like uh this is never going to work and then you put in just four lines of css and everything's immediately looking better anyway um the important part here was also that this should go on to the sides or mitigate everything and that's why we couldn't wrap the whole page with ion padding if we would do that uh the slide would already stop adhere and disappear behind the white border so therefore we couldn't use a global padding on our page now for the featured slide we need a bit more css featured slide we're just going to use display flex uh we're going to use the flex direction column is usually when we want to format something below in those slides which should already give a bit better view now we also want to align our content no we want to align the items i think to flex start that should move them to the left side okay almost good but we also got this uh info block right here which we will also style with flex so basically we're just gonna copy this again and hope that everything works and it looks already pretty good uh the router link is obviously working the loop for our slides is working if we check it out on a real device it's also working pretty nice so far um i don't know why loop isn't working on my device that's the first time i notice it but anyway we got the free mode up here we got the centered slides and we got a nice ui for our featured section i think that's a good start so that means we can already move into our details page um we will do the header fun in the end or would you like to do it now actually don't know would you like to it's really a bit tricky maybe we're already on that page let's do it come on let's implement quickly our header height directive so as we've seen in the original app the top part of the header now fades out if we scroll it up and the search bar becomes sticky and there's also a little text above it so you really have to look closely if you want to replicate animations like this what is going on as i said we won't implement everything uh we don't wanna or we made one but we're not gonna do this filling here for um the refresher would be something cool actually as well but we will do this maybe sometime else um you just have to understand which block moves at which point um to uh which direction so where is this sticky what's going on and basically we got these two areas we got the search bar area we will not take care of this that's just pretty boring and we're gonna take care of this i actually grabbed this image i won't host it because it belongs to deliveroo perhaps you can find it or just use some other image so i've put that image right here it's the delivery png i think okay um to do so we need to do a few things uh first of all let's move back into the home page on our home page we could do all of this within a header area but the header is usually sticky already and it makes it not the best place for this as we've seen everything basically scrolls with the content so i thought it would be a better idea to also put this all of this into the content to give you a quick idea for the refresher i just put this default ionic refresher in here and i think uh worse we don't really need this i can do this maybe okay i don't know if i can set timeout event target complete and we're gonna do this after two seconds so let's try our refresher works uh yeah i always forget that one two three yeah it wasn't even target complete come on that's not too hard to implement i really don't want to look up yeah complete i really don't want to look up the ionic documentation right now let's try once again okay now it's not working again great one two disappear disappear great that's working so we got the refresher up there but there's a bit more that we need to add and especially we're gonna wrap everything into two rows the first one will let's just call this class info row perhaps use not uppercase i wouldn't recommend that for css classes and we're going to give this one the template reference height header because that's the row we're going to hide in the end the content of that row is actually pretty boring we just use uh column size two for the image then we're going to use eight of our spaces for uh the information like now london and a little arrow down and towards the end we got the person outline so that should give us the basically this ui actually on a device it looks a bit better but it's also not in the right position but no worries we can fix that easily the second row is the row with a search bar this one will simply get the class sticky row because we're going to make it sticky to the top we don't need additional directives here but what we need is an ion column of the size 10 and another column of the size 2. so there we go in the column 10 we're gonna put our search bar and we're gonna put something else in the end but for now we're gonna leave it like it is now we see we got the refresher up there everything's just too far to the top so let's move back to our ion content up here and change this um what we want to do is we want to use our directive now to scroll everything out right now basically we can't scroll if you can't scroll on your page simply pick one of the categories right here i really don't mind which one and just put it down here so you got enough uh stuff on that page so you can actually scroll as we can see everything scrolls out because it's just inside the ion content let's start with the sticky row can we find our sticky row and we will simply make this one sticky to the top really it's that easy sticky row and we're gonna add for the sticky row position sticky now top is a bit complicated i will just give it zero for now uh we're going to move it above the content so we're going to use a different index we're going to give it a background because otherwise maybe we'll do one by one because otherwise we will actually see the content behind it so now it's already sticky up there but you see the content is behind it that's of course not what we want so we're gonna give it a background i also thought that so now we see it's quite nice it's coming together uh we also might want to have a little box shadow and because actually the items are aligned pretty nicely do we actually need flex in here hmm i thought we need it but i feel like we don't really need it so we will just commend this out for now now we also had our info row that wasn't the one above so this one for the info row we will also use the background white position sticky and now i brought it in i spoiled it what we want to do is we want to use the safe area top i will set this to zero that's a value that's uh showing or giving us the value of this space right here so right now um we have those two above each other not really the best idea so for the sticky row we're gonna do the same uh we're not using top zero we will calculate it by using the inside top minus 30. do you really want minus 30 and here minus 40 let's check it out um yeah that's already pretty good actually i don't know i have a shadow right here can we see a preview ios somewhere and that's that's a great size can we just get it a bit bigger like really big okay that's a bit better better now we see the border and we see that this is sticky top but those are not really the right places so some things is still wrong and that is usually the ion content because if we don't have a hera area we need to set our own padding for the top or otherwise elements will be really hidden behind something and now we see with a padding top set for iron content it looks a lot better everything now scrolls out um why are you sticky well that's fine we we anyway gonna fade it out with a directive and then we won't see it anymore but that is already pretty close to what we wanted to accomplish with just some basic css um for the ion refresher i think we also need to add let's see it on the device uh so the refresher as you can see is stuck up here and therefore we're going to add for the refresher also a bit more padding up there if you want to really keep an eye on the details we could also change the icon color for the ion search but you match our ui a bit better and now we see we got a funny thing going on but we will fix this with our directive so we haven't really touched the directive i think we need the height header directive uh in this case uh height header there we go so i've prepared just a few lines i added the renderer and the dom controller and one input so we can feed in the template reference to our header element and what we're gonna do is uh two things that we also did i think for the twitter ui first of all we're gonna um get our header hate because this is different for ios and android and we want to make this as cross platform as possible and then we're gonna set our header to the actual element of the input that makes accessing it in the end a bit easier and we also get a reference to the children of the header because we want to fade out the children of the header so this this this this and this but not the header itself the header should stay white as it is and now we will use something we uh once again used already in the past and that is a host listener the host listener for ion scroll will get all the ion scroll events if you set uh scroll events to true and then we connect everything to our app hide header and we pass in the template reference to height header i guess that was too fast so we've defined an input on app height header right here we gave it the same name that makes it easy to set the value just like this and we passed in the template reference to our row which means our directive can now uh get all the scroll events because we've set them to true and then change the appearance uh position opacity whatever of our header and we're going to do this with a little calculation and we bring this in so first of all we can grab the scroll top it's really i feel like we do this all the time when we use a custom directive for the header then we use the new position um if the new position is already below the negative value of the header height we're just going to use this because we want to make it stick at some point and at the same time we also calculate the new opacity basically it's either completely visible or then fades a bit uh when new position gets bigger no when the header height gets bigger no when your position gets bigger i think okay and finally we're gonna set all of these updates with the dom controller to our dom uh we're gonna set the style for the header which is the whole object and we're gonna mute the position so the header will move up at the same time we will set a new uh style for the children which is just setting the opacity so while the header moves up all the children's also fade a bit out let's see this in action i hope this works no okay we see it's moving up and it's also at the same time fading out and we just left with this and because it's still in place um and not completely hidden we can't see the other cards behind it and once we scroll back to the top it also comes back to us now we just need uh this little light so that was this little london line in the original application so it's london up here and then you got this i really wanted to replicate this but it turns out i would have to add another directive at that point and i really didn't want to do this so i came up with a little um i wouldn't say heck but uh it was a quite easy fix so where's my search bar there's the search bar above the search bar we're just gonna add a little ion text a color medium a bit of padding and then we're gonna use a conditional class we will use the location visible if show location detail is true or we will use location hidden if it's not true let's set it to false in the beginning because it should only be visible once we scroll up so show location detail faults for the css classes we're gonna add two more we're gonna use either opacity one when it's visible or opacity zero when it's hidden and then we also gonna listen to the scroll events of ion scroll um i will bring this in and i think oh damn i just i think i removed that line from my original code now i have to come up with the solution again um so we're going to use ion scroll on our ion content up here we've already set scroll events to true so that should work nice we're going to implement the unscroll function in here and unscroll uh what is like event uh const offset equals event detail maybe is it offset something like offset i don't know i have to log it let's quickly do this let's see so whenever i scroll i will just check against this value we could use scroll top i think we could just use scroll top if scroll top is above let's say 40 perhaps then we want to fade it in so we're going to set really ugly this show location detail equals offset greater than maybe 50 not 40. and this means it becomes true at some point and then the class is added to the object which means the transition happens and it's visible damn it's of course not visible what did i do wrong offset detail dot stop ah come on now i'm really messing up everything it was such a nice code before ah damn offset top something like this or scroll top it should be something like this i really forgot what the lock was about let's see okay now it seems to work and let's look at it on a device that usually looks a bit better so i go up and london comes in and i go down and at some point london moves away now we could improve this because it's actually still taking uh some space right here but you could do this with a custom directive and change the height really that's what i wanted to not do i think for now this solution also works pretty good okay and now we're actually already completely finished with the first page i think this is kind of nice it works pretty good we got everything in here we got this header area we got the refresher we can now use the custom refresher icon and then we are ready to dive into the details view the basic details page is actually pretty boring but we're gonna do this together so let's get rid of our homepage we're completely done with that part and we can go to the details page and open all the relevant files in here i also let uh or left the call to the html file uh to the json file oh damn this video is really too long and we're gonna lock this so we're gonna see what's going on first of all we're going to build really just the basic ui um for the header part it's really not very uh special i just used the toolbar buttons for the start with the router link not a back button just the default button because that make styling it a bit easier for the title the data from our json and then another buttons array towards the end is my phone still connected now of course not so we're gonna reconnect it as well um there's something cool with ionic that we can use uh and that is yeah thanks uh and that is adding another header in here on ios this gives the cool impression while you scroll you are first have this bigger header can we already see this in action maybe we can um yeah we can't scroll um so we have this big header right here and once we scroll it moves into the top bar automatically um just by using collapse condense in here that's really super cool and we're going to see this in action very soon to make it work we will also add an image here we will use the image for the restaurant actually as the background image and we can do this in here usually in css it's really hard to access the values from like a json response so we're going to just set style background image to the url of data.image if we inspect the console output we see that here is our image and if we don't set any css class for something like this this is what happens you don't see anything so always make sure if you're setting something as a background image you have to define hate the background size position and all of that i also added the world change in here i don't know for the the last time whenever i wanted to implement something like a parallax scrolling i used will change i think it optimizes something under the hood for those images to make the animation a bit better now we still can't scroll yet but we will get to that in a second um why do we i think we need to make our uh toolbar transparent no i don't think so let's just try and add a bit more data actually most of the data that we know gonna present is really boring and since we're already uh above uh half an hour i'm just gonna edit really once again in the note link below the video it's a row with um a lot of information so we got a column for uh the data rating the only really interesting part might be this so after the ratings there's an array of text within the data if you check the data out you see that here is an array of text if you don't want to display everything you can use the slice pipe and then it looks just like this so italian and pizza is what we see then we got the location the distance we got a little price tag for some specials up there then we got the about part right here we could also use something like uh another button to open or expand this section but really it was a bit too boring actually and then towards the end another row with this restaurant information and then another information right here you can see that most of the columns have light b g because i actually wanted to have a different background color so for the ion content i wanted to have a background that's slightly gray and we're also going to use position absolute which will move our image to the top because we don't want to have this white border we really want that the content starts right up there if we right now uh well is actually the application and what isn't so on a device it looks like this right now and if we change the position of ion content to absolute and change the padding it looks like this and now uh we can also see what's happening no it's oh i can't can we no we can't we need more content but we will get to this uh for the ion tool i also wanted to make those icons a bit smaller no problem if you add numbers from 2 to 30 it will automatically work so you can target the font size actually directly like this perhaps even a bit smaller does it actually change is it becoming smaller i don't know are my eyes that bad yeah they are okay it's really becoming small let's use something like 22 or uh looks fine so far um and then for the light background we're gonna change it to be completely white and i don't think we need this it looks interesting maybe we will get back to this later um as always i don't know why my broadcasting isn't showing this but we can usually also see it in here so we have this gray background on those sections now already have a white background that is the the very basic for our details page now things are getting a bit more challenging um maybe we're gonna wrap up our parallax image although we don't really have a lot of content um i'm just gonna replicate this or this i'm just gonna put a lot of these in here so then we can actually see our scrolling in action and try out the parallax um what's happening now is as you can see it changes from uh being this bold header here to appearing in the stages bar and having also a white status bar that's automatically happening if you put a header towards the top and another header inside your ion content it's also the default if you generate new ionic pages or a blank new ionic application there's also this behavior automatically implemented so we actually don't need yet another directive the only directive that we need is the parallax directive usually it works um mostly like the other directive that we had before so for ion content we're gonna change this um we don't need the scroll event in here yet but we need the app parallax directive and we're going to feed in the template reference to our image really what we want to do is we want to listen to the scroll event and whenever it moves i will really bring it in because we had already a few tutorials on where we use the parallax directive it's basically listening to the scroll event if we scroll uh if the scroll top is bigger than zero we wanna keep the scale image one if it's below zero which means we're pulling it in this direction we're gonna scale the image uh we're gonna make it actually bigger and otherwise we're gonna move it out slowly so that's really uh the whole idea here it's a simple calculation between those two values you can play around with these values as well and then in the end we're just gonna change our image element we're gonna call translate 3d to move it along the y-axis and then also to scale it in the end and that's really everything to make this parallax work up here so with that in place it already looks pretty cool we got the parallax we've got the changing header uh it works automatically without doing a lot from our site so that's actually really really cool and now we get to what was maybe the hardest part about this uh whole application and that was once you reach a certain threshold on the page you see at the top these slides here that i can change and i can go to something and then i can scroll and scroll and suddenly i'm in the next section and then the next section everything changes automatically and if i go back to the top it also disappears again so this is the official application and this is our application it's quite quite same actually it's not bad uh to do this we gonna have to do a few things number one we're gonna add a few slides and we also add maybe we should start with that we also add and remove everything that we had uh we gonna add an ion list in fact we're going to add multiple ir lists so if we check out data.food that was the data.food we see that we got four categories meals pasta pizza salad whatever i really just came up with this dummy data and every category then has a few meals so we're going to create a list for each of those categories each category will have the header and then ion rows for every meal inside uh they are just meal name info the price and towards the end once again using the image as the background so we're definitely gonna need the meal row and meal image and also border bottom so let's go to our css meal row actually needs no padding and meal image has a little little um border radius around it also because we haven't used ion items in here we're going to add this class for the border bottom it uses actually a step color that's what i usually found whenever there was a slight border somewhere on the page uh with this color i don't know where i found this but that usually looked exactly like the separators you also saw an ion item and now those also are separated if you check out the original application where's the original application i don't know um yeah you won't see it right yeah you can't see it um the header section so meal deals pasta are actually in a different background color they use the color of the page which gives a little difference between the different categories here and to achieve the same uh we gonna set the ion list header to a specific background and the ion list background color to white and that gives exactly what we want now we have that header with the background color it would be nice if this could just use transparent but then the list would be in the way and then we would have to give every ion row a white background color so just like this i think it's fine all right that is the first part now the more challenging part comes uh and that is our uh ion slides so this component where you can click on which moves automatically is or could be an ion slides component of course it might need some options uh we will also only display it if data is set otherwise really nothing inside our application works and then ion slide ng for let entry of data dot food and we need some access to each of those slides in the end or actually pretty soon so we're also going to keep track of the index into every slide we're going to put an ion button um on click we want to do something i actually don't know what we want to do and we want to put in the entry dot category um on click what we're going to do is um yeah we're going to of course select a specific category by the index we will see figure out how this works from code because we actually need a bit of javascript for this functionality but let's first see this in action um so we got them here that looks pretty much horrible but that's just a start really just getting started here uh we will use fill clear because in the original version uh the iron slides had a white background um and they had also i can't separate between my and their version so they had a white background here and use the primary color or if they're selected they use primary for the background and white for the fun we will achieve that in a second so what we see we definitely need more of the slides in one slide therefore we as always need some options and we're going to just set them to options so let's go back to the details page and define a few options we definitely want to have multiple on one slide um we want to have free mode for those and we want to have a bit of offset before and after so we can reach all of them so now they're visible here and we can scroll nicely through them now it's still a long way we need to make sure that they are actually not in here but they are sticky to the top and we could use the position sticky once again um but i felt like i actually don't know exactly why but it didn't work super well the other um idea or the other thing you can try if you want to make something sticky is to use the slot fixed that's actually something from ionic it's not something i came up with there's always a slot fixed inside ion content and you can put something into it and it will be fixed at some place i actually don't know yet it's now fixed at the top so that means we still need a bit of styling for them but it's already fixed now we need to do multiple really multiple things now at once uh maybe let's try and style our ion slides a bit what we're gonna do is we're gonna first of all make them stand out a bit different we're gonna give them a white background a bit of padding and make our ion button a bit smaller so we got this little row here which now completely doesn't work as it's in the wrong position so that means we need something like top perhaps 50 or something like this and this should already look better yeah 50 almost works on ios i think it's 46 pixels then would be completely nice with the header bar there we go actually even less i think 44 yeah yeah i don't know it's 44. um so we're going to position it here but we want to make it flexible and this depends on the platform so that means we need a way to set this from the details page and check out the hate of the platform and we can get the hate of the platform by using the is platform functionality if the platform is ios we're going to use 44 otherwise we're going to use 56 for android this platform can simply be imported from ionic angular standard import and what we're going to do next is we're going to inject i'm going to copy that syntax because there's so much in it uh a reference to the document it's uh really everything's standard as you can see everything's coming from angular core document private document and then we can change our document you can usually use this to add elements to your dom or change the styling or in our case set for the document element a style set property and what we're going to set is a custom css variable so you could name this simon your variable if you want to um if you want to give it something better you could call it header position but i would feel honored if you use simon of course and now the interesting part is the value for this and once again we can use a little calculation and that is to calculate the safe area inside top that we've used before plus the actual header height remember we want to position it here so we're going to skip the top area we add the height of the status bar and then it should hopefully be in the right place all right now we've written this header position to our document and that means we can just use it here instead of the fixed value and then we have set the value from code and hopefully this works exactly in the right place with dynamic value i know it's in the wrong place it's visible right now but that's a different story while we scroll it is definitely now in the right place and we can use it like we want so that is really a nice way of setting your values or checking on which platform you run and then uh setting this value or this css variable okay great um now we also want to completely hide it so we're gonna set the opacity to zero we wanna fade the this bar in uh and we're gonna use the same basically the same trick like we used before we're gonna define two classes slides visible or slides hidden and we're going to use these classes on our slide so let me bring in a little snippet which we're going to put right here on our ion slide ng class slides visible when category slides is visible or otherwise when not category slides visible it will be hidden so we just need to define this value now and set it to false in the beginning and then at some point we have to change it back to true the question is at which point are we going to do this uh i would say we're going to do this inside a little on scroll because we're going to listen to the scrolling when once again and we're going to change it based on the scroll top offset so if it's above 500 we gonna toggle it and then we will show this this should work pretty nice and by now you should know how you get the scroll events so somewhere is our ion content scroll events true ion scroll and then we call the function onscroll with the event value let's check it out hopefully it's now not visible opacity 0 and at some point we reach the offset 500 about here and then hello oh damn i somewhere made a mistake along the way damn and that's no that's not really bad because i don't know where i messed up most likely within the css but not 100 sure so we got opacity zero we got the slides uh slides visible that really that's a bad timing for my first typo of the day and it will be really hard to find uh is something wrong with unscroll let's see let's put a little lock here to our offset and check if that's actually happening so offset definitely works and 500 should be oh actually it works here and it didn't work on the other page maybe maybe i've set it to the wrong place where's our dynamic styling uh on the ion slides i guess i guess the whole ng class syntax belongs to the ion slides object not the ion slide please let it be this and make opacity and change the opacity back to zero and then it hopefully works as expected so let's scroll and then it comes and then it fades okay that that looks good let's see it on a device and there is our slides nice coming in exactly at the right time with a little transition really feels exactly like it should look like and now you see everything's coming together in the end it's just one animation one pair of legs one one shifting header but at some point the page becomes really dynamic with all these interactions that's going on or take place on this page if it looks buggy on my device it's actually completely smooth so the last part now is to allow clicking on them and also automatically activating the right section and that will be that's gonna be interesting maybe we start with selecting categories no actually i think we need to take a little step back first of all because we need to think about this if you click on it you want to select an element maybe we're going to take a look at it here so that means you need access to all these lists here we're gonna have access to all these lists so we can say okay scroll that list into view and if you need access to multiple elements within your view usually what you need is to access the view children a view child is just one element view children it means we now get all ion list on our view as a query list and because that list is actually not too good to work with we're also going to use another array to keep track of the actual elements initially we will also set our active category to zero and then we can also define a little custom ui for the active category in a second um yeah that's it maybe we're going to do this because that's actually easy i'm working from the easy part that we can do towards the more complicated uh things so making uh the category active should be pretty easy we're just gonna set the ion button class active category if the active category is equal to the current index of the iteration that was the whole reason we used the index and so we can call that a select category with the index but i hope that makes sense for you just give it a quick thought why we're using it like this that means one button will have the active category class and the active category class now simply defines a different ui for that button with the different background color color border radius and font weight so that means right now the first category should be active just like this and we now just need a way to also activate the others and scroll to them but so far that looks already quite nice okay back to our query list and what we want to do now getting all the elements from the query list isn't too easy and usually you could just do something like this this dot lists uh i think two no this dot lists please to array and then you would get the array the problem is this doesn't work in the beginning and therefore you first of all need to listen to the changes because otherwise it would really be boring if you just get the array of future rules ah come on so we're going to subscribe we don't really need the uh result anyway and now we can do what we wanted to do the whole time we're going to set the list elements to this list sorry new keyboard still new to this uh and there we go and then we have this dot list elements containing all our lists or actually a reference to all of our lists we should now see it there we go four element references and that will make our life a lot easier because now if we want to select a category we can simply grab the right child from our list elements and get the native element and then we can scroll our content to that child you can do this with standard javascript function or you could also do it the ionic way which would be like this accessing your ion content as a view child and then calling this dot content uh scroll to point i think i'm not really interested in the first value second value is child dot offset top and we're gonna do this in one second the duration is actually in milliseconds so don't try something like one two three that won't work all right let's see actually if i click on pasta it scrolls a bit too far so in my first example i simply reduced the offset top by 120 that worked a bit better so then it brings pasta into the view pizza also salad is already quite visible and if i'm somewhere down here and go back to meal deals is also scrolls them into view that works good now the only thing that's left is checking while we scroll if something is inside our view and for this we're going to iterate all of our items in the unscrolled this could be potentially a problem for the performance since onscroll has really triggered a lot of time and if you have many list elements or many of you children go through them and perform some kind of heavy operation that might take a bit of time so be careful with what we do next there was a helper function on stack overflow that used um the get bounding client rec to check if an element is currently in the viewport i just copied it and removed the the start and end because i really don't care about that index but what we can do now is whenever we scroll uh we grab each element so one by one we go through all the elements in our list elements and we check if this dot is element in v port item in that case we're gonna set our active category to the current index of the iteration we break because we don't really want to set anything else to active and at the same time we can also call uh the slides so we can inject the slides as well um just like we access the ion content we can access our ion slides we only have one ion slides on that page so that should work yeah things this code completion is sometimes really a nice joke this does slides um go to or slide 2 slide 2 and then the index once again this and the speed is there a default for the speed i actually don't know let's use let's try this again and let's hope it's also in milliseconds let's see if this already works i actually don't know if we missed something at this point i'm a bit lost so we're on meal deals and at some point we activate pasta and we activate pizza and we can't go further to sell it because it doesn't work but we can go back to pasta and back to meal deals and it works let me quickly check if i missed something within the view but i feel like if it's working we can't we no i don't think we have forgotten anything we have the active category uh we're making it dependent on the slides visible so if we check it finally out on our device we see that my device is in the right time not connected again so there we go here's the final preview of the application uh we can scroll it up with our nice effect we can scroll through the list and it will automatically change quite nice we can also manually change it to switch somewhere and we can also go to no we can't go to sell it because it's right here a down list it's not 100 perfect the whole logic that we've implemented um especially on scroll is also triggered when we uh click on something here so that makes life a bit harder but overall we are kind of subscribed and can dynamically display them within a fixed slot we have this nice header which automatically moves into the status bar we have the parallax header up here and we also got our initial page with the first animation uh where we moved out the header and faded in something and made it sticky in the first place all right and that's it finally for today i think this was the longest video i ever had on this channel thanks if you follow through i hope you enjoyed all the little wisdoms and things we have covered in this video the result application looks really great i think the details page is really awesome um there are a lot of different things going on in that page like uh the changing header which moves to the status bar the parallax image the fixed slide which become visible at some point the automatically changing slides really i highly enjoyed creating it although it took me really very long if you want to see more of the built with ionic series let me know in the comments and also subscribe to the channel and like the video if you want to see more about ionic if you're not yet a member of the ionic academy of course make sure you check it out after the video so you can build even more and even better ionic applications faster in the future i've been simon this has been our build with ionic tutorial about the food ordering application and i will hopefully catch you next week like always so happy coding [Music] you

Channel: Simon Grimm

Views: 13,218

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: 82iWIKejaiQ

Length: 65min 39sec (3939 seconds)

Published: Tue May 04 2021