Welcome folks today in this blog post we will be embeding
material timepicker input
field using ngx-material-timepicker
library in Browser Using TypeScript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new samplerproject
cd sampleproject
And now you need to install the below library using the below command as shown below
npm i ngx-material-timepicker
And after that you need to edit the app.module.ts
file of your angular project and copy paste the below code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { NgModule } from "@angular/core"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { BrowserModule } from "@angular/platform-browser"; import { CommonModule } from "@angular/common"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { MatButtonModule } from "@angular/material/button"; import { MatCardModule } from "@angular/material/card"; import { MatFormFieldModule } from "@angular/material/form-field"; import { MatIconModule } from "@angular/material/icon"; import { MatInputModule } from "@angular/material/input"; import { MatMenuModule } from "@angular/material/menu"; import { MatSelectModule } from "@angular/material/select"; import { MatToolbarModule } from "@angular/material/toolbar"; import { MatTooltipModule } from "@angular/material/tooltip"; import { NgxMatTimepickerModule } from "ngx-mat-timepicker"; import { AppComponent } from "./app.component"; import { LOCALE_ID } from "@angular/core"; const lang = "en-US"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CommonModule, FormsModule, ReactiveFormsModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule, MatTooltipModule, NgxMatTimepickerModule.setLocale(lang) ], providers: [{ provide: LOCALE_ID, useValue: lang }], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} |
And now we need to edit the app.component.html
file and copy paste the below html
code as shown below
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!-- --> <mat-form-field appearance="outline"> <mat-label>MY FIELD</mat-label> <input type="text" matInput [ngxMatTimepicker]="timepicker" format="12" (dateChange)="onValueChange($event)" [required]="required" readonly [formControl]="formControlItem" /> <button mat-icon-button matSuffix *ngIf="formControlItem.value && !formControlItem.disabled && !required" (click)="onClear($event)" > × </button> <button mat-icon-button [disabled]="formControlItem.disabled" (click)="openFromIcon(timepicker)" matSuffix > OPEN </button> </mat-form-field> <ngx-mat-timepicker #timepicker></ngx-mat-timepicker> |
As you can see we have a simple material input
field where we have the material
timepicker. If we click it then we will see the window to pick time as shown below
And now you need to edit the app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import { Component, ViewChild } from "@angular/core"; import { FormControl } from "@angular/forms"; @Component({ selector: "my-app", templateUrl: "./app.component.html" }) export class AppComponent { formControlItem: FormControl = new FormControl(""); required: boolean = !1; @ViewChild("timepicker") timepicker: any; /** * Lets the user click on the icon in the input. */ openFromIcon(timepicker: { open: () => void }) { if (!this.formControlItem.disabled) { timepicker.open(); } } onValueChange(e){ console.log(e.target.value); } /** * Function to clear FormControl's value, called from the HTML template using the clear button * * @param $event - The Event's data object */ onClear($event: Event) { this.formControlItem.setValue(null); } } |