月間25,000PV達成! 収益は毎日発生中! 記事はほぼ毎日更新中! ギランバレー症候群に関する情報を集めています

AngularでTimepickerを導入!使用方法を解説!

AngularでTimepickerを導入!使用方法を解説!
Advertisement

 

AngularでTimepickerを使いたいあなたへ。

今回は、AngularでTimepickerを使う方法をご説明します!

 

 

僕のPC環境

OS:Windows10

Angular:7

 

 

 

Timepicker公式サイト

以下のサイトを元に実装していきます。

■Angular powered Bootstrap

URL:「https://ng-bootstrap.github.io/#/components/timepicker/examples」

 

 

Timepickerを利用するための環境構築

ng-bootstrap」をインストールします。

 

bootstrap」をインストールします。

bootstrapのCSSを使用するためにインストールします。

 

■詳しくは以下のサイトに記載されています。

URL:「https://ng-bootstrap.github.io/#/getting-started」

 

 

Timepicker実装手順

今回は、Timepickerの中の「Meridian」を実装してみます。

 

Timepicker用のコンポーネントを作成します。

 

 

app.modules.ts」を上記のように編集します。

Timepickerを利用するためには「NgbModule」が必要です。

 

 

ルーティングの設定を行います。

これで、「http://localhost:4200/timepicker」にアクセスできます。

 

 

timepicker.component.ts」を上記のように編集します。

 

 

timepicker.component.html」を上記のように編集します。

 

 

Advertisement

 

画面を見てみると

Angular×Timepicker画面

ちゃんと表示されていますね。完成です!

 

 

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

まとめ

今回は、Angular×Timepickerを実装してみました。

思いのほか簡単でしたね。

是非参考にしてみてください!

Travelerを知らないの?