仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

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

  • URLをコピーしました!
悩んでいる男の子

AngularでTimepickerを使ってみたいんだけど、導入方法が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • AngularでTimepickerを使う方法
  • 本記事の執筆者
いずみん(@izumin_0401)

今回は、AngularでTimepickerを使う方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を1案件以上斡旋! ※条件あり
  • オンライン完結型なので、在宅でもお仕事可!
  • プロのメンターがサポートしてくれる!

キャリアカウンセリングメンター相談無料でできるのもおすすめポイントです!

目次

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」を上記のように編集します。

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

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の勉強をしました!
非常に分かりやすいのでおすすめです!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!
目次