Improve this

Angular 2+

この章を読み進める前に、Onsen UIをはじめようOnsen UIの基礎に目を通して頂くことを推奨いたします。心配ありません、読み終わるまで5分もかかりません。

Angular 2+用のバインディングは、Onsen UIのWeb Componentsを拡張してAngularと親和性の高いAPIを提供するものです。

Angular 2+バインディングのダウンロード

Angular 2+バインディングはngx-onsenuiパッケージを通じて配布されます。下記のようにしてNPM経由でダウンロードしてください。

$ npm install onsenui ngx-onsenui --save-dev

また、CDN経由で利用することもできます。最新のリリースにもAngular 2+バインディングが含まれます。

Angular 2+バインディングのセットアップ

Onsen UI for Angular 2+は、Web ComponentsをラッピングしたAngular 2+向けのディレクティブが含まれています。これらのディレクティブはOnsenModuleと呼ばれ、Angularモジュール(NgModule)に含まれます。NgModuleの詳細については、Angularモジュール(NgModule)- TSを参照してください。

OnsenModuleを使用するには@NgModuleを用いてインポートしてください。OnsenModuleが正しく読み込めていない場合は、正しくレンダリングすることができません。

またOnsen UIはCustom Elementsを用いて構築されていることから、CUSTOM_ELEMENTS_SCHEMAをモジュールのスキーマに指定する必要があります。この指定が含まれていない場合は、Onsen UIのコンポーネントを読み込んだ際にエラーが発生致します。

import {OnsenModule} from 'angular2-onsenui';
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

// Start module
platformBrowserDynamic().bootstrapModule(AppModule);