angular5-time-picker
This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.
It provides a time picker component compatible with Angular Material 5.
Environment
This component works with Angular 5
Install
Install with the following command:
npm install angular5-time-picker --save
Usage
Import the this module into your module as follows:
import { Angular5TimePickerModule } from 'angular5-time-picker';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
Angular5TimePickerModule,
MatCardModule,
MatSnackBarModule,
MatCardModule,
MatFormFieldModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
}),
export class AppModule {
...
}
Set up the config of time pickers in your AppModule.ts (format 12H)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Configuration of the time picker (format 12H with a default date and time)
private config = { hour: 7, minute: 15, meriden: 'PM', format: 12 };
...
}
Update your HTML (app.component.html) and instantiate the time picker :
<mat-form-field>
<input matInput [matTimepicker]="picker" placeholder="Choose a time">
<mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
<mat-timepicker #picker color="primary"></mat-timepicker>
</mat-form-field>
Angular Material 5 style to import (use default or your own theme)
Please use the default theme from https://material.angular.io/guide/theming as follows:
Update your index.html to include the following style
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
Update your 'styles.css' to use the beautiful Angular Material theme:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Build
npm install
npm build
Running with Angular CLI
ng serve