Dynamic tabs

[bart.verweire]

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

[munsterlander]

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

[bart.verweire]

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

Regards,

Bart

[munsterlander]

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

[IliaSky]

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

[bart.verweire]

@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

[IliaSky]

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

[munsterlander]

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!

[bart.verweire]

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:

[IliaSky]

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