How to Add A Side Menu to Your Ionic 4 App

[Music] hey everyone what's up this is I'm from the ioniq Academy in this quick one I will show you how to implement the site menu with ionic 4 and we had this video before but a few things actually changed it got a lot easier so I thought it would be a good idea to update the video so here we go I've created the blank new app like this ionic start Academy menu based on the blank template and we're gonna use angular for this video like always so then we can generate some pages and I'd like to have them in the pages folder so we're a little bit more structure in our application so therefore we can get rid of the home folder and when we asked again and then we can create first of all the menu pages which will host the general template for the menu so defining the site menu and the entries and then we are the first page and the second page so oops so we can actually display something within our menu and the original words and also had a module file but we will not use this and in here we can get basically get rid of everything and the entry point of our app will be the actual menu module and in here the magic happens which is actually not so much magic at all anymore so let me bring up ionic surfed in the background to see our app already and then in here we see we got the empty path which we could change to let's say menu and then we simply define the children for our menu and those will be these two great entries I'd really love to have a function that splits up these things of it and because I record this video almost right after the taps video I know that the path to our file is now wrong because we came from this level and we are now down one level so we just have to go up one level and then the first and the second page are right next to our menu module all right so now now we got those two paths we got the menu in place which is displayed but not really a menu yet and we also should implement a little redirect in here I think we can go to let's say for the path MT which is the path we are on in the beginning we will redirect to slash menu slash first so this means the route I will look up the first part which resolves to this component and then it will look up the first inside the children array which is this and then loads our first page module okay so sounds pretty easy so far so let's create the actual menu and this is not a bit more interesting but maybe maybe we even take one step back and already create the array of pages that we want to display in our menu so we could do this in the menu HTML as well with multiple buttons but maybe you just like to have a little pages array which defines the information up front so you can easily update it in here so let's say title and URL for the first page it would be menu slash first and then for the second or second page and menu second also we will keep track of the selected path so this will help us to actually mark the active menu item based on the path and therefore we would have to subscribe to the Rueter events so import the which are from an angular rutile like this and then directly in here we say this dud Ruta events subscribe because it's an observable and then we should get back an event of the type Ruta event actually they're pretty or quite a lot of events if you lock this out and we will for now just use this selected path equals event at URL so this will give us the currently selected URL we can have a little check in our view if the selected path is equal to the URL of the item and then add some CSS let me bring it in for the active item based on the iron primary color so to the left side we will have this 8 pixel solid bar hopefully all right the missing piece is still our actual menu page and here we could start with the iron menu but actually it makes a lot of sense to use ion split pane because the iron split pane can be just or simply around the iron menu and this will take care of for example if your app runs on the iPad it will automatically have the sidebar open that you know from many applications so we will see the resize effect in the browser as well so in terms of the iron menu of course you could also get rid of this totally optional so the iron menu consists of the actual menu definition and below the menu we got an iron ruta outlet which needs an ID let's say content and also it needs to be the main root ah outlets ionic knows on the angular root or knows where to display the actual pages so this is just the markup for the site menu that you pull in and this is the area where the first or the second page or whatever page you get will be displayed okay it's important to understand and to make sure the menu knows where to display the stuff we need to connect it using the content ID and then content so make sure that this is equal this if this is xxx then this will have to be like this all right so now we can implement menu and in here we basically got everything that we normally have as well so I on header I on toolbar on title menu or we could leave this out that's completely optional and then we got eye on content and for the iron content we will craft a simple list consisting of iron menu toggle items so these items will automatically toggle the menu which is especially helpful if the Apple runs on an mobile phone because the space is small so you always want to close the menu but we can also pass in Auto hide false which is helpful for bigger brothers so we will see the difference in a second and then of course for page of pages that's the information that we defined up front right here so therefore we got iron item that we can craft we can give it the title of the page and now we just need to hook up the root our information of the page and here we will use Ruta link and we will surrounded with brackets which tells angular that this is object it needs to get the value from so therefore we use P that URL and if we will use it like this the Ruta will actually look for this string that's of course not what we want to so we put the brackets around it and then it will resolve to the actual variable and we also should set the root direction in this case route if you make this like forward or back the animation when the pages display it looks different and for site menu I think route looks the best and finally this is again more or less optional setting the active item so if the selected path is equal to P that URL and maybe if you go down deeper you could also just check if the URL starts with this or whatever so that's just a basic idea how we could implement it so right now we should be able to see the menu but we don't see it because we haven't implemented the menu button but maybe this is how the split pane works so if the device is big enough menu will automatically be visible and we see actually things work pretty good we got many second we got menu first and those things work now we just need to make sure that those things work on small devices with a button and perhaps also how to programmatically move around in our app and therefore let's go to our first page and first of all implement the iron buttons where the slot starts so they're displayed at the left top hand or if you use right-to-left I think it's the other way around that normally it should be or most of the time or whatever it's at the beginning so this is the iron menu button and this button will automatically be visible if there are so many so right now we should be lucky and see the button there we go second page needs this one as well otherwise we are lost on that page also multiple ways to open the menu or different elements so we could use an ion menu toggle and inside we need to put an iron button actually I think menu toggle is what we yeah what we used right here and I on button whatever expand full and then toggle menu so now we edit this I on menu toggle to our first page so let's move back to first and this button now allows us to toggle the menu and what now happens is once the screen gets bigger and the menu is already visible the menu toggle button is not displayed anymore so only if the menu is hidden the menu toggle button is displayed but we can display them like we do in the site menu if we pass in auto hide false so that's exactly why we use this if we remove this from our side menu I think those two elements of the side menu yep well be invisible because okay now there would be visible right but if the menu is already open they wouldn't be visible alright enough about auto hide and the toggle button let's do two more things first one I will copy the button first one for example using a click event to open the menu might be interesting in some cases and then let's also try to navigate to our second page by using a simple href or let's try a route a link better idea most of the time so this should be menu second go to second all right now we just need to put the open menu button here and to open them in that's interesting function okay to open the menu we need the menu controller menu controller from ionic angular MN simply menu controller let's use toggle so as you can see there are quite a lot of options for the menu controller that you could use to open too close to whatever but we will just use okay this is toggling the menu this is also totally opening the menu so both the toggle button and the click button works as expected and now let's hope we move to the second page yeah we're on the second page and everything looks pretty good so we can move around we can go to our second page back to the first page see everything at once if we're on a website or on a tablet device perhaps and of course now the open menu is not working because the menu is already oh so that's everything on how to create a site menu with ionic 4 it has become a lot easier over the different betel words and then the release candidates and now with the stable version of ionic 4 it is super easy using the path and our angular return so if you enjoyed the video also make sure to check out my ionic Academy com if you want a great platform to learn ionic as fast as possible with the help of the community and I'd love to see you as a new subscriber I'll see you inside the next video hopefully [Music]

Channel: Simon Grimm

Views: 70,039

Keywords: ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, angular, ionic tutorial, ionic framework, ionic angular, ionic guide, cross platform, hybrid app, ionic course, ionic, cordova, javascript, ionic 4 side menu, ionic side menu, ionic angular router, ionic 4 routing

Id: I82_roQSgco

Length: 14min 59sec (899 seconds)

Published: Fri Jan 25 2019