3. How to use ons-tabbar and OnsNavigator in the same app[Angular2]

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to use ons-tabbar and OnsNavigator in the same app[Angular2]

  • J

    Hi, I’m using Angular2.
    Could anyone help about this topic?
    Please kindly share me simple code.

    • Want to do
      I want to use OnsNavigator to move to the page not in the ons-tab.

    • problem
      If I set the ons-navigator like below code in app.html, I can’t use tabbar.
      I get TypeError: JSON.stringify cannnot serialize cyclic structures.

    • code(app.html)

    <ons-navigator swipeable id="navi" var="navi" [page]="dashboard">
<ons-page>
  <div class="content">
    <ons-tabbar [attr.animation]="animation" position="auto">
      <div class="tabbar__content"></div>
      <div class="tabbar">
        <ons-tab icon="columns" [page]="dashboard" active></ons-tab>
        <ons-tab icon="search" [page]="search"></ons-tab>
        <ons-tab icon="group" [page]="post"></ons-tab>
      </div>
    </ons-tabbar>
  </div>
</ons-page>
</ons-navigator>

    Kindly confirm.

    0
  • J

    Sorry, I found it in the playground.

    I will share if anyone needs the same information.
    https://onsen.io/playground/?framework=angular2&category=common patterns&module=navigator_tabbar

    0