
AngularでTimepickerを使ってみたいんだけど、導入方法が分からないんだよね。。
こんな悩みを解決します。
- 本記事の内容
- AngularでTimepickerを使う方法
- 本記事の執筆者


- 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
- 物販月利50万円⇒脱サラ
- 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
- 物販は彼女と楽しみながらやっています!
今回は、AngularでTimepickerを使う方法を解説します。



すぐ読み終わるので、是非最後まで読んでみてください!
Timepicker公式サイト
公式を参考に実装していきます。
Timepickerを利用するための環境構築
npm install --save @ng-bootstrap/ng-bootstrap
「ng-bootstrap」をインストールします。
npm install --save bootstrap
「bootstrap」をインストールします。
bootstrapのCSSを利用するためにインストールします。
Timepicker実装手順
今回は、Timepickerの「Meridian」を実装してみます。
ng g c component/timepicker
Timepicker用のコンポーネントを作成します。
// 共通モジュール
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// 共通コンポーネント
import { AppComponent } from './app.component';
import { TimepickerComponent } from './component/timepicker/timepicker.component';
@NgModule({
declarations: [
AppComponent,
TimepickerComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
「app.modules.ts」を上記のように編集します。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TimepickerComponent } from './component/timepicker/timepicker.component';
const routes: Routes = [
{ path: 'timepicker', component: TimepickerComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
ルーティングの設定を行います。
これで、「http://localhost:4200/timepicker」にアクセスできます。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-timepicker',
templateUrl: './timepicker.component.html'
})
export class TimepickerComponent implements OnInit {
private time: {};
private meridian: boolean;
constructor() { }
ngOnInit() {
this.time = {hour: 13, minute: 30};
this.meridian = true;
}
public toggleMeridian() {
this.meridian = !this.meridian;
}
}
「timepicker.component.ts」を上記のように編集します。
<ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
<button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
Meridian - {{meridian ? "ON" : "OFF"}}
</button>
<hr>
<pre>Selected time: {{time | json}}</pre>
「timepicker.component.html」を上記のように編集します。
画面を見てみると…


ちゃんと表示されていますね。
まとめ
今回は、AngularでTimepickerを使う方法を解説しました。
意外と簡単でしたね。
ではまた!
- おすすめ本はこちら!



僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!
- 自由な生き方がしたいなら!
自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。
当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。
コメント