How to Create an Ionic Bottom Drawer with Gestures

[Music] what's up samonix welcome back to a new quick win on how to create a bottom drawer with ionic and angular this is a cool component i saw recently uh inside a swift tutorial for ios which looks pretty cool and i also saw this in a tutorial by aaron souness who's doing a great job creating tutorials mostly around react and i thought maybe we can adopt this for angular and also changed a few things that i thought could be improved so let's do this i've created a blank new ionic application as usually i always recommend capacitor by now and the only thing we need right now is a new module which will uh hold all components and a new component so i wanted to create this in a component so you can easily reuse this in your own application in the original post everything was in one page but i think this approach really helps you to um use the code right away in your application so whenever you got a shared components file like this um you add your new component which is called the draw component our case to the declarations and then also to the area of exports once you've done this with the shared components file you can now import this module basically everywhere in your application and we will import it inside the home module so go ahead shared components module there we go and now our home page is set up to use this module um right in our home page also within the shared components module one important part is to import the ionic module because usually in your components even if there are custom components in your ionic application you want to use something like ion list item whatever anything any component that starts with ion and therefore you also need to import the ionic module into your shared components module file so uh i would say we directly add this usually when you add a new component it has the name app uh slash your name for the component so i will just use this of course feel free to change the name um so let's use just abdraw right inside our home page and if we save this and run this we already see the draw component works but of course uh we need to add a bit more content in here so as you've seen in the beginning in the quick animation um this is a component like a box that we can pull up and down release and flip up or down so we need to attach a lot of gestures um we need a somewhat unique uni uh ui so therefore let's just create a new div element and we will give it the class draw and we might also need a reference to this element as a view child so therefore we use this approach now i also wanted to add a little button which is always this we can see right here which mostly uh looks like this thing right here but a little bit more gray and inside that box that's the usual pattern i've seen in the past so i want to replicate this i will just do this with an ion button and some additional styling so let's center the ion button ion button fill clear i don't want to have any background on this or i actually want to have background but a very specific background i'm gonna expand full and i also would like to attach a little click event here to toggle the draw so when you click on that area it will immediately flip up that box and within the button we will simply add the draw pull which will basically be this horizontal bar icon thing whatever you want to call it so let's add this function right here before i forget about it and then additionally after the button comes just random whatever you want so i will just put in ion list uh maybe we'll do a few more items right here but that's just for testing today you can put in anything you want now if we check out this well it's not really a bottom drawer so let's get into some css for this first of all we want to position the drawer somewhere else so we will use position absolute actually um we will give it a little bit of box shadow i took this box shadow from the ion card so i didn't came up with this cool values they were just well they were for the ion card you should give it a width of 100 um if you want to you can also set the border radius which are like the edges you see at the top to whatever looks good for you and then we can take a first look now it looks already a bit different but that's still not what we want we need to position it at the bottom so what we're gonna do is we will put it to the bottom and usually i wanted to do something like uh minus 77 view height and then i want to set the actual height to something like this so this would already move the box to the bottom you see it right here um we will take care of this behavior in a second um but that's kind of hard for different devices so what i came up instead is using a little calculation and adding the environment safe area inside bottom because on ios you also got this bottom area that you should take care of so we will use this approach instead i'll keep the hate to 80 view hate if you experience any problems you might tweak a little bit more on these values and also the values we will later use in the javascript code but that's for now a good idea we will also set the index for a reason because we later want to have a little backdrop here and then we can make sure that this box is always above the backdrop and because the backdrop is somehow applying its own color to our box we will set the background for our drawer by default to white um it looked so good before why are you wrong right now anyway let's quickly also do the css for the pull icon which should be just like a really little grey icon in here so give it a little bit of background with and hate and then you got this nice thingy right here which should be actually at the bottom of our file not sure why it is there right now so what we saw before is that we were actually able to scroll this page which can be tricky with this draw component therefore i came up or i actually saw this on aaron's post as well you can set the scroll y value to false which prevents the scrolling and then i make sure the component is at the right place but as far as i know um let me quickly check this as far as i know the component should be at the bottom with exactly this css so let me quickly take a look okay a little typo can make a huge difference so of course this is safe area inside bottom and i also changed the value a tiny bit so now it's positioned completely correctly and we can leave the css and we can leave the spec file of course as well and let's focus on the draw component which is really the most important part in here first of all we need access to our view child which is the draw we gave it already the uh element name and we also want to read the element reference i think actually we're just using a div element so we don't really have to but it should be fine as well like this also um i want to output to the parent component if the drawer is currently open or closed why because then we can easily display our backdrop so if we toggle it right here we would perform the toggle we would open it but the parent component wouldn't know about this an easy way to send some information back to the parent component is using the output annotation and we will call this open state changed and let's call this one open state it's a new event emitter um with a boolean so it will just uh return true or false if the draw is opened or not and then new event emitter and we're fine here so that's the way to send some information back to the parent component to catch this in our home page we can easily use our app drawer right here and say open state changed and when this happens please call our function toggle backdrop and within the event there's actually the value true or false so that's really super easy to catch let's go back to the draw component on which we will really want to focus so then we also want to internally keep track if the component is open of course in the beginning it's not and then i also want to take care of the open hate a bit more dynamic so in aaron's tutorial um he used a fixed pixel value for both the bottom and the height then it works kind of great and you can easily position it if that's what if that works for you and then really i recommend to use the fixed values i just wanted to uh find a more dynamic way of doing this so that's why we will get the open head from the platform and we need to do this not in our own init but actually in the after view init and then we can change this to as ink after view ng after viewing it and now within this function all our elements are initialized so we can first of all access the actual draw which is our draw view child dot native element so we don't have to type native element all the time and then we can set our open hate to this platform which we should maybe inject private platform from ionic angular and then simply call hate and because our view is currently about well this value let's try something out so in all those places where you see my strange calculation it's not 100 there yet i if you want to make this really perfect component you might play around with a few values here and there so that's just a little disclaimer and now the funny thing begins where we use the gesture controller from ionic we can now create a new gesture we've done this in the past maybe already um and this time it will be a bit more challenging the easy part is specifying on which component we want to add this gesture and specifying is just some name let's just call this swipe and the direction is actually this axis because we just want to go up and down we don't want to go right or left and now we can specify for unmove a function and we can move say for on end you could also use onstart but in this case i don't think we need onstart and before i forget about this after you've set up the gesture call gesture enable and i think for some reason you have to pass through so that's fine all right that's it so far now the on move calculation is actually pretty easy maybe we will lock out the event first of all um and then also do it in here so you see uh that we actually already applied this so will be a bit tricky um to yeah there we got actually a few events and the interesting part is the delta part right here because that specifies how far the touch moved up in general whenever this value is changed or gets passed to the on move function we simply want to reposition our draw component and we can do this by calling drawer style transform and call translate y and set this to um let's see minus nope uh event delta y pixel and somewhere we need to close that so that's the general idea now we actually should already be able to no of course we're not actually it's not too crazy if you just make spelling typos like this in your translate function then it's no wonder that nothing changes so now i can move this one around but we see we should maybe limit this because at this point we should maybe stop up bringing it up and therefore we will add a little if block here so if the delta is lower than this dot open height then we will just return which means at some point we just stop doing our transformation so let's quickly save this and i can also comment in my part once again because that wasn't really the problem the problem was something else so there we go i can bring it up and it stops at some point and i can also bring it down if you're fine with this natura somehow flipped away if you're already fine with this then great but usually you also want to implement a little bit on end because that should solve some of the problems and you can do a bit more in the end for this i will bring in a bit of code which we will take a look at so if the draw is not yet open and our delta is uh below this value which you can also change it means we came from the bottom and we moved for a certain area which usually means the user wants to flip open something and in that case we will automatically do a little transformation right here we will translate it completely to the open head and we will talk about this as well other case is it is already open and we're moving it from the top back to the bottom with a little flip so you can change this something between 50 and 100 work great for me in terms of uh mimic a swipe event um maybe we could actually attach another swipe even not sure about that though so in that case it will just go back to normal additionally uh we finally use our event emitter in here because this is a place where um we say it was completely opened or it was completely closed so we will emit either false or true we will keep track of this actually not sure or maybe we use it in here so that's why we use this now we can also go to our toggle drawer because this is basically uh what we need in here as well so the toggle is when we click on this little icon we get a reference to our native element we will emit the state before we actually do anything else because i felt like that's working better in terms of displaying a little backdrop fade animation and then if it's already open we will close it and otherwise we will open it using the same functionality so if i now click on it i can toggle it um toggle backdrop yeah we haven't implemented that but that works already pretty good i can also flip it up and flip it back to the bottom works great as well and i can still open it so in terms of the general draw functionality we already got everything in here now it's time to focus a little bit more on our backdrop component which we want to add to the home page so within here i will now use a simple div there is actually an ion backdrop which didn't really work great for me i now tried it a few times but it never really worked for me and we will add an ng class which will conditionally apply a class now our homepage is actually pretty easy we will just have one backdrop visible and hopefully don't make any typos today anymore and then we got our toggle backdrop which will simply have the value is visible and then we can set our this backdrop visible to is visible so this will simply change the value typescript is happy and we can make the ng class depending on our backdrop visible so hello background visible if the backdrop is visible we will add the class fade in and otherwise we will just use the class fade i also i want to do a little toggle from buttons so i will also add a button that's something you also see in some applications where on button click for example in todoist application the draw comes up so um you can easily do this by directly calling the function on the component if you use a reference like this so let's add draw and then the button could simply directly call draw toggle draw for our backdrop i also want to do the same so if we click on the backdrop we will also call the same functionality now of course right now we don't really have any backdrop because or maybe we have backdrop um this function works that's cool but we don't have the css for it yet so for the backdrop i will just bring in this little code completely fill out the screen use a black color with a bit of alpha here right there so that's why we got eight characters in the hex code and the position 10 remember our draw had the position 11 and position absolute um now it's immediately visible and the reason is that we haven't faded it out so there's the fade and the fade out um class that get added or that are added based on the backdrop visible right here that's just a conditional class and our conditional class in the fade which is the standard case means opacity at zero and i will also move it in the back because in the case uh it's invisible i also don't want to see any touch event on my backdrop otherwise we will fade it in and we add an index then we will see so now you see we got a nice transition and i can also click my backdrop and now the cool thing is remember we added the event imager to our component so even if we just interact with the component the information gets returned to our view and i think that's pretty cool now what's not working yet is swiping them out the reason is actually i don't know completely what the reason is but the problem is that um this code actually runs so let's just add something in here change is visible why can't you just complete this the problem isn't that the function isn't called so when i swipe it up change true change fault so everything's fine but the backdrop isn't displaying and usually that means something inside the internal angular change detection isn't correctly wired up in your case and you can easily fix those things using the change detector ref so let's do this change detector ref and after changing our value we will call this and call detect changes which is basically like telling angular please could you just check if there were changes and the reason or the solution now works it's the same like before we're just telling angularji please can you check again maybe there are some changes in the view that you should uh render and change and now we got our nice little draw we can pull it out we can pull it in we can open it from the button and the only thing you might need to change is a bit more css or fine-tuning for the different values like the height or how far you pull it in or when you release it based on the delta when it should flip up or down but that's really up to you and i hope you enjoyed this component this is really a component i saw in a lot of native applications and once again we can replicate it with ionic to spice up our applications 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: 9,881

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: xl4S8FM8Wcc

Length: 22min 27sec (1347 seconds)

Published: Tue Oct 13 2020