Monaca Onsen UI Discord Chat Github Repo

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



  • 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.



  • 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