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

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

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

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:

@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

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

Regards,

Bart

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