Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. jcfrane
    3. Posts
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Posts made by jcfrane

    • Asianconnect

      Hi I just want to showcase an app we created at our company using OnsenUI and Angular. Basically, Asianconnect is a betting platform.

      2_1566312080364_Screen Shot 2019-08-20 at 10.40.29 PM.png 1_1566312080364_Screen Shot 2019-08-20 at 10.40.11 PM.png 0_1566312080362_Screen Shot 2019-08-20 at 10.39.56 PM.png0_1566312436739_Screen Shot 2019-08-20 at 10.46.48 PM.png

      You can visit it here https://www.asianconnect888.com/register/?pk_kwd=081510

      You can try the app when you registered.

      If you have any questions regarding how we implement the app, just ask me here :)

      Thanks!

      posted in Showcase
      jcfrane
    • RE: Splitter and navigator

      Can someone help me with my issue on nesting ons splitter inside ons-navigator?

      https://community.onsen.io/topic/3371/unhandled-promise-rejection-expression-split-is-not-a-function-when-using-splitter

      Thanks!

      posted in Onsen UI
      jcfrane
    • RE: Unhandled Promise rejection: expression.split is not a function when using Splitter

      Hi can someone help me here?

      posted in Onsen UI
      jcfrane
    • RE: Unhandled Promise rejection: expression.split is not a function when using Splitter

      This is happening because I cant’t push a page containing ons-splitter which is weird

      posted in Onsen UI
      jcfrane
    • Unhandled Promise rejection: expression.split is not a function when using Splitter

      Hi I have the following setup when using the ons-splitter.

      app.component.ts

      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {
        // We should have a Blank Page
        initialPage: any = DashboardPage;
      
        constructor() { 
      
        }
      
        ngOnInit(): void {
        }
      }
      

      app.component.html

      <ons-navigator [page]="initialPage"></ons-navigator>
      

      dashboard.page.ts

      @Component({
          selector: 'ons-page[dashboard]',
          templateUrl: './dashboard.page.html',
      })
      export class DashboardPage implements OnInit {
          sidePage = SidenavPage;
          contentPage = ContentPage;
      
          //@ViewChild('splitter') splitter;
      
          constructor(private navigator: OnsNavigator, private sideNavService: SidenavService) {
              //this.sideNavService.menu$.subscribe(() => this.splitter.nativeElement.side.open());
          }
      
          ngOnInit(): void {
          }
      
          navigate(): void {
              this.navigator.element.pushPage(DepositPage);
          }
      }
      

      dashboard.page.html

      <ons-splitter #splitter>
        <ons-splitter-side [page]="sidePage" side="left" width="220px" collapse swipeable>
        </ons-splitter-side>
      
        <ons-splitter-content [page]="contentPage">
        </ons-splitter-content>
      </ons-splitter>
      

      content.page.ts

      @Component({
          selector: 'ons-page[content]',
          templateUrl: './content.page.html',
      })
      export class ContentPage implements OnInit {
          constructor() {
      
          }
      
          ngOnInit(): void {
          }
      }
      

      content.page.html

      <ons-toolbar>
      <div class="left">
          <ons-toolbar-button (click)="openMenu()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
      </div>
      <div class="center">Content Page</div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      Swipe right to open the menu!
      </p>
      

      and lastly, sidenav.page.ts

      @Component({
          selector: 'ons-page[sidenav]',
          templateUrl: './sidenav.page.html',
      })
      export class SidenavPage implements OnInit {
          constructor() {
      
          }
      
          ngOnInit(): void {
          }
      }
      

      sidenav.page.html

      <ons-toolbar>
          <div class="center">Left Page</div>
      </ons-toolbar>
      <div class="background"></div>
      <div class="content">
      
      </div>
      

      So the AppComponent display the DashboardPage as the initial page for ons-navigator. And DashboardPage has the splitter with the sidePage as the SidePage and the content as the ContentPage

      What has caused the error I mentioned about?

      Thanks!

      posted in Onsen UI
      jcfrane