カルーセル

<ons-carousel>要素と<ons-carousel-item>要素を使ってカルーセルのUIを表現することができます。

<ons-carousel>
  <ons-carousel-item>
    ...
  </ons-carousel-item>
  <ons-carousel-item>
    ...
  </ons-carousel-item>
  ...
</ons-carousel>

Angular 2での扱い方

コンポーネントからカルーセルを扱うには、ViewChildデコレータを使ってコンポーネントのプロパティに代入してから操作します。

まずコンポーネントのテンプレート内にtemplate reference variableをつけたons-carousel要素のElementRefをおきます。ここでは#myCarouselというtemplate reference varialbleを使っています。

@Component({
  template: `
    <ons-carousel #myCarousel>
      ...
    </ons-carousel>
`
})

コンポーネント側では、プロパティに対してViewChild()デコレータを使うとその要素のElementRefオブジェクトが代入されます。ElementRefオブジェクトのnativeElementプロパティからそのDOM要素にアクセスできるので、そこから<ons-carousel>要素のメソッドにもアクセスできます。

class MyComponent {
  // ElementRefが代入される
  @ViewChild('myCarousel') carousel;

  showNextPage() {
    // ons-carouselのnextメソッドを呼び出す
    this.carousel.nativeElement.next();
  }
}