Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. bart.verweire
    B
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    bart.verweire

    @bart.verweire

    0
    Reputation
    7
    Posts
    621
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    bart.verweire Follow

    Posts made by bart.verweire

    • RE: Template usage

      Thanks for your help, but in fact things aren’t getting any clearer.
      I have tried your navigator example, which doesn’t work here.
      In your example, you define a variable myPage. How is this constructed ? Do I need to construct it first, or should it be constructed by the ons-navigator component ?
      Anyhow, the code, as presented, compiles, but the MyPage class is never instantiated. The ons-navigator element/component never loads anything …

      I guess I will have to wait until the documentation is up to date with or until you have some kind of showcase application on github.
      The interactive tutorial isn’t ready yet for angular 2.

      Regards,

      Bart

      posted in Onsen UI
      B
      bart.verweire
    • RE: Template usage

      ok, thanks, I will try that (later).
      But in the mean time : I only copied what’s in the documentation :
      https://onsen.io/v2/docs/angular2/ons-template.html

      and also the tab example makes use of the same template :
      https://onsen.io/v2/docs/angular2/ons-tab.html

      The page attribute for a tabset is said to be a string. It would be interesting then (or maybe it is already), to make this a component as well.

      Regards,

      Bart

      posted in Onsen UI
      B
      bart.verweire
    • Template usage

      OnsenUI proves to be much more difficult to use than I hoped.
      Going to the beginning, I now try to use templates as in the seemingly simple example.
      However, even this fails :

      Here’s my component :
      import { Component } from '@angular/core’
      import { ONS_DIRECTIVES } from ‘angular2-onsenui’

      @Component({
      selector: ‘app’,
      directives: [ONS_DIRECTIVES ],
      template: <ons-template id="foobar.html"> <ons-page> Page content </ons-page> </ons-template> <ons-navigator page="foobar.html"> </ons-navigator>,
      })
      export class DbInventory {
      constructor() {
      }
      }

      But it fails :
      foobar.html is not an object!

      This is probably something very stupid. Thanks for advice.

      Regards,

      Bart

      posted in Onsen UI
      B
      bart.verweire
    • RE: Dynamic tabs

      i forgot the version of onsenui indeed.
      Actually I used
      "angular2-onsenui": “^0.1.0-beta.7”,
      “onsenui”: “^2.0.0-rc.10”

      I have upgraded the versions, but the problem is the same.

      I have looked into the source code, and I have the impression that the attribute label is not an input attribute for the component :+1:
      Only page seems to be annotated as an attribute.

      export class OnsTab implements OnDestroy {

      @Input(‘page’) set page(pageComponentType: Type) {
      …
      }

      Thanks anyway

      @munsterlander : no problem, thanks for your time :smiley:

      posted in Onsen UI
      B
      bart.verweire
    • RE: Dynamic tabs

      @munsterlander
      I’m sorry, my answer wasn’t clear enough : I do understand that it’s possible to modify the dom programatically, but the purpose of Angular 2 is just to avoid changing the dom like that.

      In order to create a list dynamically, it should be sufficient to do something like
      <ul> <li *ngFor=“let title of titles”> {{title}} </li> </ul>
      titles is an array property on the corresponding Component.
      This works for a simple list, but it surprisingly doesn’t work for <ons-tab>
      I would very much like to stay within the programming model of Angular2.

      @IliaSky: I’m using
      "@angular/common": “2.0.0-rc.1”,
      "@angular/compiler": “2.0.0-rc.1”,
      "@angular/core": “2.0.0-rc.1”,
      "@angular/http": “2.0.0-rc.1”,
      "@angular/platform-browser": “2.0.0-rc.1”,
      "@angular/platform-browser-dynamic": “2.0.0-rc.1”,
      "@angular/platform-server": “2.0.0-rc.1”,
      "@angular/router": “2.0.0-rc.1”,
      “angular2-onsenui”: “^0.1.0-beta.7”,

      Thanks

      Bart

      posted in Onsen UI
      B
      bart.verweire
    • RE: Dynamic tabs

      @munsterlander
      thanks, but I didn’t find a clue in the link you have provided.

      Regards,

      Bart

      posted in Onsen UI
      B
      bart.verweire
    • Dynamic tabs

      Hello,

      in all examples of using a tab bar, the tabs are added explicitly.
      I would like to add tabs dynamically. So I use *ngFor on <ons-tab>.
      However, I can’t manage to get the label right.

      Here’s my component

      import { Component } from '@angular/core’
      import { Routes, ROUTER_DIRECTIVES } from '@angular/router’
      import { ONS_DIRECTIVES } from ‘angular2-onsenui’

      @Component({
      selector: ‘dbinventory’,
      providers: [],
      pipes: [],
      directives: [ROUTER_DIRECTIVES, ONS_DIRECTIVES],
      template: <ons-navigator> <ons-page> <div class="page__background"></div> <div class="page__content"> <ons-tabbar> <ons-tab *ngFor="let title of titles" [label]="title"> </ons-tab> </ons-tabbar> <ul> <li *ngFor="let title of titles"> {{title}} </li> </ul> </div> </ons-page> </ons-navigator>,
      })
      export class DbInventory {
      public titles: Array<string>;

      constructor() {
      this.titles = [
      “Monitor”,
      “Database Info”,
      “Global Info”
      ]
      }
      }

      Thank you for you help

      Bart

      posted in Onsen UI
      B
      bart.verweire