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">
      <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>

    Kindly confirm.

  • Sorry, I found it in the playground.

    I will share if anyone needs the same information. patterns&module=navigator_tabbar