Template usage

[bart.verweire]

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

[IliaSky]

Actually the problem is a little bit different than you think.

In Angular 2 we don’t actually expect you to be using the ons-template tag as it doesn’t fit well with Angular 2’s beliefs.

Therefor the navigator expects its page property to be an Angular 2 Component, rather than a string.

@Component({
  selector: 'ons-page',
  template: `
  	<ons-toolbar>
  		<div class="center">My Awesome Title</div>
  	</ons-toolbar>
    <div class="content">
    	My Awesome Page content
    </div>
   `
})
class MyPage {

}

@Component({
	selector: 'app',
	directives: [ONS_DIRECTIVES],
	template: `<ons-navigator [page]="myPage"> </ons-navigator>`
})
export class DbInventory {
	myPage = MyPage;
	constructor() {
	}
}

Sidenote: The .content element is not there by chance - it maps to the .page__content element which onsen ui is using, so please use it :) While things can work without it it’s possible that there may be some issues with the bindings if you don’t use it.

[bart.verweire]

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

[IliaSky]

Oh. I guess this is our bad (in terms of documentation). Technically this was probably true for an earlier iteration of the bindings. This is behaviour which comes from the core (this is how onsen ui would work even without angular 2). But now that we have proper bindings for the tabbar we would like it to behave in the proper “Angular 2 Way”.

It actually is already a component. Maybe we forgot to update the docs when we released the last version of angular2-onsenui.

Since we recently made changes to the navigator, tabbar and splitter in angular 2 there may be still some tweaks needed here & there in both code and docs :) .

[bart.verweire]

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