How to Combine Ionic Side Menu and Tabs Navigation

Подписаться 94 тыс.

Просмотров 64 тыс.

50% 1

Let's build an Ionic app and combine Ionic Side menu with Tabs and highlight the right items!
🔥 Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
#############################
Want to read instead of watch? Here's the full tutorial: devdactic.com/ionic-side-menu...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.com/ionic-crash-...
#############################
My Private Daily Vlog: / @solopreneuradventures...
You can also find me
on / schlimmson
on / devdactic
on / simongrimm_
#############################

Наука

Опубликовано:

3 июл 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@heartpyrate 6 лет назад

Indeed very well explained and you one of the few i seen, who can actually just type in the entire code just like that.. too good :)

@spidernethtoys7522 7 лет назад

Hi Simon, thanks for sharing this tutorial!

@kingandrew1024 7 лет назад

Thank you Simon, it was very well explained

@leahluecking3051 6 лет назад

ionic 3 menu example

@fxess9468 7 лет назад

Thank you, very nice tutorial!!!

@m8_981 6 лет назад

dude ur a legend! thanks so much for the effort!!!

@galaxies_dev 6 лет назад

Thank you so much!

@nubecaz 6 лет назад

Tu muy bien , había probado directamente con la app que creaba con ionic start sidemenu pero no me funcionaba, ya con tu ejemplo ya todo bien muchas gracias.

@LeandroLima-ew7tl 6 лет назад

Exatamente o que eu estava procurando... Tks a lot... :)

@sweetvibrations 7 лет назад

Excellent tutorial

@seferderya2318 6 лет назад

a great tutorial, thx!

@abahkonan6041 6 лет назад

thank you very much for this lesson on tabs. I would like to learn how to do facial recognition with ionic

@Sarah_42 5 лет назад

Great video! Thanks a lot!!!!

@amanullahaman8750 6 лет назад

Thank you sir. It's awesome. It save my day.

@galaxies_dev 6 лет назад

Happy to help Amanullah!

@manwaicheuk3045 5 лет назад

Thanks for ur really good tutorial I have a question Can i click Special page then the bottom tab will not disappear? Thanks~

@chethannp5981 5 лет назад

Hi Simon, Can you please make a video on how to use routes, passing params, retrieving it, lifecycle events for Ionic 4 please. super confused with the new navigation approach :(

@arunsainaik6301 6 лет назад

hi Simon...can u plz name which visual studio editor theme you are using??

@jorgeeliecerfonsecaluna4488 6 лет назад

Gracias! Excelente

@TheNgrjn 6 лет назад

Thanks man...

@dianabanana3596 6 лет назад

I followed the tutorial exactly and my tabs(tab 1 and tab 2 ) do not show at the bottom of the page even if i can see It's navigated to the tabs page. help

@Wulanmaulida30 7 лет назад

at special page can u put tabs like another page tab1 and tab2? i want to put tabs in every page on side menu

@heavybitentertainment6718 6 лет назад

thanks for this tut. why is it that my side menus and tabs cant coexist? my code looks exactly like u've explained here. when i run the app the first time, both side menus and tabs show fine. But when i refresh the app, the side menus disappear.always have to restart the component for the side menus to display again!! I later realize that the behavior is the same even if i build run the app on a physical device! What could be the problem?

@King_Eke 6 лет назад

Hey man, great video.. but assuming you actually created a real login page, when you create a log out button that'll log the user out and nav back to the login screen.. then tabs still go with it and show on the login screen.. and the user can still access those other pages.. without being logged in

@whyneil 6 лет назад

There seems to be a problem for pages in the sidemenu that are not part of the tabs. How do you get the tabs on sidemenu pages that are not part of the tabs?

@charlesleybaldemor4413 6 лет назад

How to change icon when I click the icon of the tab?

@AndeCaleb 5 лет назад

Hello simon, i just went thru your tutorial and its cool, but i'm trying to create an ionic app, that utilizes the right and left side menu's, the left side menu shows on all the pages, but the right side menu shows on only one of the pages, so you have two menus on that page, one on the left (the default) and the one on the right.. but i dont know how to go about it... thanks.

@lucassrt007 5 лет назад

what if I only have 2 buttons not a menu? getActiveChildNav() will this still work?

@chill2469 5 лет назад

Mantul pak eko .. lanjutkan tutorial nya. i like this tutorial . ty

@HazrulAiman 3 года назад

mantul boss

@desmopassie 6 лет назад

Very good, well explained, thank you!

@hakangoker9712 5 лет назад

I was wondering why we need this // Set the active tab based on the passed index from menu.ts this.myIndex = navParams.data.tabIndex || 0; since we can set it active with this this.nav.getActiveChildNav().select(page.index); I assume this will select the tab and make it active.

@mohameddahshan9486 4 года назад

thank you..

@galaxies_dev 4 года назад

Welcome!

@tonocampa7254 6 лет назад

Bro! How can I open a link in the side menu?

@nazehabel 5 лет назад

Thanks simon for the tutorial... meanwhile i have a challenge in getting the app runin as i keep getting Error: No component factory found for LoginPage. Did you add it to @NgModule.entryComponents? Error: No component factory found for LoginPage. Did you add it to @NgModule.entryComponents? and the styling seems not to be working infact

@lingeshwaran123 6 лет назад

Im new in ionic i have a error in No component factory found for Tab1Page. Did you add it to @ NgModule.entryComponents

@bikerhunt 6 лет назад

Hi Simon you are doing good boss please make side bat with submemu i think i dind't get this kind of video on youtube we need all this please will you tech us

@Myrreina_ 6 лет назад

I am find a problem, this is a "ViewChild is not defined". How the solution about my problem sir?

@peterborinski 6 лет назад

Hi Simon! Great tutorial thank you very much, works like a charm. Unfortunately this tutorial will not work for long. I get the console warning: (getActiveChildNav) is deprecated and will be removed in the next major release. Use getActiveChildNavs instead. Could you update your tutorial with getActiveChildNavs please? :)

@babbintandukar9959 5 лет назад

yeah now it says getactivenavchild is not a function

@gabrielsoares7516 5 лет назад

Nice your video ... Why not release the code version in github? #imdev

@pj7876 5 лет назад

can u show the tabs in standed alone page?

@lilililliilil 6 лет назад

Thank you Simon! I have one question which is how to hide tabs after logging out? Instead of using getRootNav()

@galaxies_dev 6 лет назад

Just set a new RootPage (perhaps a LoginPage) that is not included in a Tab Bar interface!

@lilililliilil 6 лет назад

Simon Grimm I solved the problem a few days ago. Thanks for the reply me back:)

@marwanyousry1033 6 лет назад

Hello Simon what should I do if I want to show tab-bar in the special page, I need serious help, please.

@casvantrierum1894 5 лет назад

Did you find a solution for this? Beacause I need this too!

@jhanreygonzales1510 6 лет назад

Is there a github link or something?

@IvanchoDiaz 5 лет назад

SPANISH : Hola es importante la tecnologia solo permite la parte de acceso especial de manera push y no root de resto funciona perfecto gracias por el contenido

@karenab9527 6 лет назад

Hey super good tutorial but I've a cuestion, I'm trying to return to the login page after entering but I can't cause it has .../#/menu/Tab I tried with this.navCtrl.setRoot('LoginPage'); but it does not work

@galaxies_dev 6 лет назад

Karen AB you might need to get the rootNav controller of your app for that!

@karenab9527 6 лет назад

thaks for answering, an other question do you have any idea how to make a backround service in my app with ionic 3 and cordova?

@galaxies_dev 6 лет назад

Check out this Plugin for using the Background mode: ionicframework.com/docs/native/background-mode/

@rishabhkumar8376 5 лет назад

Can u please show me how to add submenu with submenu

@galaxies_dev 5 лет назад

Take a look at this perhaps: ionicacademy.com/ionic-side-menu-with-sub-items/

@BboyMay 6 лет назад

how to update getActiveChildNav.getSelected to getActiveChildNavs because getActiveChildNav is deprecated

@Chinjj 6 лет назад

hi, as you mention, so do I put [0] on every getActiveChildNavs()?

@farooqsheikh8707 6 лет назад

Thanks but how to keep tabs on special page also, without special page in tabs? I need serious help please.

@jhanreygonzales1510 6 лет назад

@Farooq The special page is designed to be a page where tabs are not present.

@farooqsheikh8707 6 лет назад

Thanks sir, but i needed to show tabs also on the special page as in case of large scale app where there are more menu(special pages) than few tabs and the need is to maintain tabs on all pages through out the app (in general) except few. However i manged it by adding the footer to all special pages but i didn't like the approach as of redundant code result on each special page. but works!

@jhanreygonzales1510 6 лет назад

Maybe show me some screenshots? I can't quite get what you are up to.

@venkateshvoona7680 5 лет назад

Its nice video and very good explanation. I had the similar issue. In my case I have few tab Items, if I click on one of the tab item it will open menu. So far its working fine but when I select menu item it should navigate to new page. The page is navigating but somehow the tab bar is missing. Could you please help me out on the same. stackoverflow.com/questions/57073691/tab-bar-is-missing-when-navigating-to-another-page-in-ionic-3 Thank you.