3. Dynamic tabs

Dynamic tabs

  • B

    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

    0
  • 侍

    @bart.verweire I don’t know how to do it in React, but adding elements dynamically was discussed here: https://community.onsen.io/topic/391/onsen-2-with-jquery-and-loading-json-into-list/2 Maybe this can help get you going in the right direction.

    0
  • B

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

    Regards,

    Bart

    0
  • 侍

    @bart.verweire :expressionless: Ok, specifically the javascript (modified for you) in the exact post I linked to was:

    var onsItem = document.createElement('ons-tab');
document.getElementById('tabbarID').appendChild(onsItem);

    This will need to go in your loop. Now how you could take this traditional JS and put in in React, I am unaware of, but this is how you dynamically add items.

    I would suggest a quick search regarding React.createElement or React.createClass such as: http://stackoverflow.com/questions/30195720/how-to-use-react-createelement-children-parameter-without-jsx As that may be able to lead you in the right direction.

    0

  • @munsterlander - actually he seems to be asking about angular 2, not react but I guess your answers may still be helpful. Also you’re going to hate me for asking this but

    @bart-verweire - what version of onsen ui and angular2-onsenui are you using?

    0
  • B

    @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

    0

  • @bart-verweire You actually forgot to mention the version of onsenui (core).

    If I remember correctly the bindings for the tabbar were actually introduced in angular2-onsenui@0.1.0-beta.8. So make sure you are using onsenui@2.0.0-rc.16 and angular2-onsenui@0.1.0-beta.8 before continuing.

    0
  • 侍

    Apologies to both, when I saw component I immediately thought React due to all the recent influx of questions regarding this. Man, this is like twice where I misanswered. My bad!

    0
  • B

    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:

    0

  • @bart-verweire
    Thanks for mentioning attributes.

    Actually what you are setting is not the attribute, but rather a property of the component [attr.label]="title" is what you should write to set the attribute.

    Angular 2 is a little weird in this regard, since people expect these things to be attributes, but I guess they decided to copy react and go with properties instead. At least without the bindings you can still write class="sth" whereas in react you need to write className :D .

    As for why you don’t see the attribute in the code - it’s because it’s implemented in the core - core/src/elements/ons-tab.js#251.

    0
Log in to reply