angular2-onsenui-kitchensink not working
-
Hello,
the example at https://github.com/OnsenUI/angular2-onsenui-kitchensink does not work for me. After a npm start I get the following errors:
ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/animations/animations.ts:45:20 Property 'pushPage' does not exist on type 'OnsNavigator'. ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/animations/animations.ts:46:37 Property 'popPage' does not exist on type 'OnsNavigator'. ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/home/home.ts:27:20 Property 'pushPage' does not exist on type 'OnsNavigator'. ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/tabbar/tabbar.ts:23:20 Cannot find name 'ons'.
I already replaced the pushComponent to pushPage but it does not helped. Does anyone have a working demo project for Onsen UI 2 and AngularJS2?
My tabbar.ts:
import {Component} from '@angular/core'; import {Routes, ROUTER_DIRECTIVES} from '@angular/router'; @Component({ selector: 'tabbar', providers: [], pipes: [], directives: [ROUTER_DIRECTIVES], templateUrl: 'app/components/tabbar/tabbar.html', styleUrls: ['app/components/tabbar/tabbar.css'], }) export class Tabbar { tabs: Array<any>; material: boolean; constructor() { this.tabs = [ { path: '/home', label: 'Home', }, { path: '/forms', label: 'Forms', }, { path: '/dialogs', label: 'Dialogs', }, { path: '/animations', label: 'Animations', }, ]; this.material = ons.platform.isAndroid(); // Error } updateStyle(platform: string) { this.material = platform === 'android'; } }
My animation.ts:
import {Component, Inject, forwardRef} from '@angular/core'; import {ONS_DIRECTIVES, OnsNavigator} from 'angular2-onsenui'; @Component({ selector: 'ons-page', template: ` <div class="waiting">Please wait...</div> `, styles: [` .waiting { text-align: center; font-size: 24px; margin: 100px auto 0; } `], providers: [], directives: [ONS_DIRECTIVES], pipes: [] }) export class TempPage { animations = ['none', 'fade', 'slide', 'lift']; constructor(@Inject(forwardRef(() => OnsNavigator)) private _navigator : OnsNavigator) { } ngOnInit() { } } @Component({ selector: 'animations', templateUrl: 'app/components/animations/animations.html', providers: [], directives: [ONS_DIRECTIVES], pipes: [] }) export class Animations { animations = ['none', 'fade', 'slide', 'lift']; constructor(@Inject(forwardRef(() => OnsNavigator)) private _navigator : OnsNavigator) { } push(animation) { this._navigator.pushPage(TempPage, { animation }); setTimeout(() => this._navigator.popPage(), 1500); } ngOnInit() { } }
Thank you in advance!
-
@Viatorus The kitchen sink wasn’t updated yet to the latest Angular 2 version I think. It will be updated soon probably. The other templates are updated and working (the ones in Monaca CLI). We are adding samples to the interactive tutorial app right now as well.
-
@Fran-Diox Thank you for your answer. The github repository is now up to date. Thank you for your fast revision. :)
-
@Fran-Diox yes…can you give us simple app in github using angular 2, most of tutorial in documentation using reactjs. thank you very much
-
@lapisanlangit As it was already mentioned, the kitchen sink is already updated. And it’s on Github.
most of tutorial in documentation using reactjs
I think the tutorial app has exactly the same examples in React and in Angular 2.