Adding Sidemenu and Tabs Inside the Blank Template

Baljeet Singh
A free video tutorial from Baljeet Singh
Freelance Full Stack Developer, Instructor
4.0 instructor rating • 5 courses • 12,062 students

Learn more from the full course

Ionic 4 - Build PWA and Mobile Apps with Angular

Build Progressive Web Apps, Native Android and iOS Apps with Ionic 4 and Angular

03:34:01 of on-demand video • Updated August 2019

  • Build Native Mobile Apps with Ionic 4
  • Build PWA with Ionic 4
  • Getting to know Ionic 4
English [Auto] In this video we will take a look at how we can add the side menu and tabs inside the iron blank template to get started. We can create the new project with the iconic blank template so we can type. I like start than the name of the app I will use my Yelp dash plank and then the template name which is blank so now I press enter. So this will create our project and then it will install the dependencies for our project. So this will take some time so I will be back when it finishes. Now that our project is greater. So we contain the directory to our newly created Project and then we can open the project inside the call register which in my case is V.S. code and I am using the inside to thrilled obvious code so we can open up project by typing code insiders. Then dot so this will open our project inside our fierce code so we can first start by opening the new terminal window and then we can end the project by typing ironing serve. Now this will be our project for the first time and then it will open it inside the browser. So this is how the irony project with a blank template looks like. So if you open the developer console and then click on this toggle device toolbar window and maybe that select pixel to excel maybe. So this is how it will look inside of pixel 2. So nothing fancy here. So let's see how we can first add deaths inside of the blank template. So let's open the new terminal window so we will click this plus icon here and we have to create some pages so we will create one page for the tabs I think generate page depth. So this will be the page responsible for showing the tabs. And after that we will add some more pages 141 then tab to and the last one for. Tab 3. So now we can close our terminal window and then we can go to air routing module tortillas and in here we can see for our route part we rejecting to the home page and in return home page or post this home page module and then what we can do is we don't need that home. We actually want to open tab. So we will actually comment this code. All right. And then instead of text we want to keep it empty because we want to open the devs in a root page and we don't need that one two and three rows inside of our probably module we will be adding it inside of the taps module so we can comment this out also. So now we can save it actually and then we can go to wire taps module or tears and in here we can add the new parts. So first we will start with the devs. So this will be the main page slash staff shout and then we can add the children here and in here we can add part so this should be children. I forgot the L and for the part we will see Devon. And then here we can see children and here we can specify particle Grand Prix so this part will correspond to. Slash Devon. And in here we can add law children because we are too lazy Lord Devon Moore do so here we can specify the path to over to have one more do so we can actually expand this and currently we're inside of our taps. So we have to go one step up so we can typed or taught then slash and here we can specify a one and then we will go to have one dot module and then after the hash we have ADD that tab on module class name so we will copy that and then we can paste it here. All right and similarly we can specify the parts for have to and Tab 3 so we can actually copy this code and in here instead of 2 in all these places we have to specify a two instead of one. And here's three and start of one. So we have specified paths forward 1 2 and 3 and 4 the last step we have to add for of route part we want to redirect two tabs slash to have one and we want to match the exact part so we will say path match equal to full. So this is what we have to add to our task module Lutyens file and now we can go to other devs page or ties to Yemen and here we don't need that header too. And the content we actually have to specify i.e. tabs. So this is an impact by Nic for snippets plugin so we can use that. So this will actually add all this boilerplate we require to add this tab. So here we have specified and there var Florida code of autumn so the tabs will show at the bottom of the screen and here we are specifying I tab button and any here to have a code would have one. So this corresponds to that path here. So similarly on all these different ion type buttons we have type 2 and temp 3 which specifies this step two and three. And after that we have this ion icon we have specified the name for the icon and then we have that label that will show for each Dev. So this is to have one tab 2 and TAB three. All right. So now we can save that. And now if we take a look at inside of the browser we can see currently we're on to one and in here at the top we can see that one. And if you go to tab two. So we're seeing tab two at the top of the screen and then tab three. So currently the content is empty so let's add some content here. So inside of over editor we can go to that one page or ACMA. So here we can add this is there one content. OK. So we can actually copy that maybe let's set to have two content and then we have that tab three content. OK so here you can see we're on the tab please. So we're getting this. I this is I let tab 3 content. So if you go to tab two we are getting that tab to content and then have one content. So this is how we can add the tabs inside of the blank template. So now let's see how we can add a site. Many also so for the site menu let's first close all these steps and maybe let's minimize or cleft solar open directories and now we can go to source app and then we can go to app Cambone or the chairman and inhere instead of Angel Grove clicked. We can actually comment this out. We can use ion split pane snippet by ionic for slippage plugin so we can actually reset so as we have only one menu so we don't need to add manually before that for the side. We will add start here because we want to show it on the left of the screen and then we have this overly and for the title we can see maybe my app and for the content maybe see menu content goes here. Okay. And similarly we're adding this I out our outlet before I'll split pane tag adds so now if you take a look at inside of the browser we can see the split pane is working for the menu. So as currently we're on the desktop screen we're seeing that the split pen on the left side we can see our menu and on the right side we can see of the content. So our tabs are still working the way it should. So we can open the developer console here and now if we slide from left to right we can see our menu overlay shows. Right. So this is where we can add our menu content. But if we're on the large screen so our menu appears side by side on the left. Okay but now if you see we have to slide from left to right for the menu to appear we can actually add that hamburger menu icon at the top left or top plate or any of it in our application. So let's see how we can add the hamburger menu so that when we click on that hamburger menu icon. So this will open the menu for us. So we have to add icon in each and every file of our application. So let's start with Devon. So if we go here and before the ion title component we can add in menu button snippet. So this is also provided by ionic force plugin. So we want to show the button at the start and then we have that eye and menu button component. So we don't need to pass a menu item here because we currently only have one menu. So this will just work. So we can save that. And now on the top left we can see we have that hamburger menu icon. So if you click on that. So this will open the menu for us. But if you happen to have two and a half three we don't completely have that I can hear. So let's add it there also. So we can copy the exact code here and then we can open up to page or steamer so we can paste it here. And similarly to have three page orders Gemma OK. And now we can see the hamburger menu icon appears on tab to tab three and Devon. All right. So if we close that that I can won't appear and then the menu appears on the left side of the screen. And now actually let's try to add some menu icons or menu list on the left side of our menu so we will first go to our protein modular tiers and let's uncommon this home page it out. So we will keep it to the bottom. So I will save it. So we have that home rule also. And now let's close it. So inside of our app component we can add a list so we can type a list. So the snippet destroyed it by only for snippets plugins so we can press Enter here and then here we can add to maybe tabs and then here we can add home and then for each item we can add that link. So we will add I love to link and for the part we will see dabs here. We can actually remove this and now maybe let's copy that and maybe a stitch here for the sake and drought for the home we will use slash home. OK. So now we can save it so currently we're on the tab road. So if you click on home we can see of a home page shows up. So if you click on tabs you can see our same def one they have two and three interface shows up. So this is how we can add the side menu and the tabs inside of unique four blank template.