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
-
@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 :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
orReact.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.
-
@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”,Thanks
Bart
-
@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 usingonsenui@2.0.0-rc.16
andangular2-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 writeclassName
: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.