Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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’

    selector: ‘dbinventory’,
    providers: [],
    pipes: [],
    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 = [
    “Database Info”,
    “Global Info”

    Thank you for you help


  • @bart.verweire I don’t know how to do it in React, but adding elements dynamically was discussed here: Maybe this can help get you going in the right direction.

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



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

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

    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: As that may be able to lead you in the right direction.

  • @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?

  • @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”,



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

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

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

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