angular2-onsenui-kitchensink not working

Viatorus

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!

Fran Diox

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

Viatorus

@Fran-Diox Thank you for your answer. The github repository is now up to date. Thank you for your fast revision. :)

lapisanlangit

@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

Fran Diox

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