cant resolve '@angular/flex-layout' in 'node_modules/ng5-time-picker/src/app/components/w-mat-timepicker'

I found this awesome looking module under https://www.npmjs.com/package/ng5-time-picker and it says that I have to import it withimport { Ng5TimePickerModule } from 'ng5-time-picker'; this does not work for me. Does anybody care to help. Thanks

_

First I had to install GIT to get it to run npm install. So that's not ideal. Second I'm getting error

The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (C:\dev\projects\BackOfficeServices-ui\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:662:23) at plugin.done.then (C:\dev\projects\BackOfficeServices-ui\node_modules\@ngtools\webpack\src\loader.js:467:39) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) @ ./src/app/app.module.ts 25:37-102 @ ./src/main.ts @ multi ./src/main.ts

I'm importing into my modules like so.
import {MaterialTimeControlModule} from 'material-time-control/src/material-time-control.module'

There are some issues because it needs to update some libraries when you work with angular-cli 6 and material design 6.
Please could you update this component

Here the messages when install this component with npm

npm WARN @angular/[email protected] requires a peer of @angular/common@^2.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/core@^2.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of zone.js@^0.7.2 but none is installed. You must install peer dependencies yourself.

Thank you in advance.

Hello Steve. I`d like to use your MaterialTimeControl, where could I find the documentation for it.
Thanks for advance.

Is there a plan to add 15-minute (or other) increments feature so it only allows to select time in quarter hours?

I am binding this control with Angular 5. But is is throwing error as below.

Below is my HTML

    <div fxLayout="row" fxLayoutGap="2em">
        <mat-form-field fxLayout="row">
            <mat-datepicker-toggle matSuffix [for]="dpScheduled"></mat-datepicker-toggle>
            <input matInput [matDatepicker]="dpScheduled" name="scheduledDate" formControlName="scheduledDate" placeholder="Scheduled date">
            <mat-datepicker #dpScheduled></mat-datepicker>
        </mat-form-field>
        <div fxLayout="row" *ngIf="scheduledTime">
            <w-mat-timepicker name="scheduledTime" place color="primary" [(userTime)]="scheduledTime"></w-mat-timepicker>
        </div>
    </div>

    <div fxLayout="row" fxLayoutGap="2em">
        <div fxFlex="fxFlexFill" fxLayout="row">
            <mat-form-field fxFlex="fxFlexFill">
                <textarea matInput placeholder="Requested Reason" formControlName="requestedReason" required></textarea>
            </mat-form-field>
        </div>
    </div>
</form>

Below is my TypeScript file.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ITwilioRequest } from '../models';
import { Validators, FormBuilder } from '@angular/forms';
import { ServiceRequestService } from '../service-request.service';
import { ITime } from '../../shared/models/ITime';
import { DateTimeHelper } from '../../shared/time.module';
import * as cloneDeep from 'lodash/cloneDeep';

@component({
selector: 'service-request-edit',
templateUrl: './service-request-edit.component.html',
styleUrls: ['./service-request-edit.component.scss',
'../../../../node_modules/material-time-control/src/time-control/w-mat-timepicker/w-mat-timepicker.component.scss',
'../../../../node_modules/material-time-control/src/time-control/w-clock/w-clock.component.scss',
'../../../../node_modules/material-time-control/src/time-control/w-time/w-time.component.scss',
'../../../../node_modules/material-time-control/src/time-control/w-time-dialog/w-time-dialog.component.scss'],
})
export class ServiceRequestEditComponent implements OnInit {

private twilioRequestId: string;
public twilioRequestForm;

public requestedTime: ITime;
public scheduledTime: ITime;

public twilioRequest: ITwilioRequest;
public twilioRequestCopy: ITwilioRequest;

constructor(private servicerequestservice: ServiceRequestService, private route: ActivatedRoute,
    private fb: FormBuilder) {
    this.twilioRequestId = this.route.snapshot.params['twilioRequestId'];

    this.requestedTime = { hour: DateTimeHelper.Hour, minute: DateTimeHelper.Minute, meriden: DateTimeHelper.StringPm, format: DateTimeHelper.Format };
    this.scheduledTime = { hour: DateTimeHelper.Hour, minute: DateTimeHelper.Minute, meriden: DateTimeHelper.StringPm, format: DateTimeHelper.Format };
}

ngOnInit() {
    this.getTwilioRequestData();
}

onCancelChanges() {
    this.twilioRequest = cloneDeep(this.twilioRequestCopy);
    this.rebindForm();
}

getTwilioRequestData() {
    this.servicerequestservice.getServiceRequestById(this.twilioRequestId).subscribe((twilioRequest) => {
        this.twilioRequest = twilioRequest;
        this.rebindForm();
        this.twilioRequestCopy = cloneDeep(this.twilioRequest);
    });
}

private rebindForm() {
    this.twilioRequest.requestedDate = new Date(this.twilioRequest.requestedDate);
    this.requestedTime.meriden = DateTimeHelper.getMeriden(this.twilioRequest.requestedDate);
    this.requestedTime.hour = DateTimeHelper.calculateHourFromDate(this.twilioRequest.requestedDate, this.requestedTime.meriden);
    this.requestedTime.minute = this.twilioRequest.requestedDate.getMinutes();

    if (this.twilioRequest.scheduledDate) {
        this.twilioRequest.scheduledDate = new Date(this.twilioRequest.scheduledDate);
        this.scheduledTime.meriden = DateTimeHelper.getMeriden(this.twilioRequest.scheduledDate);
        this.scheduledTime.hour = DateTimeHelper.calculateHourFromDate(this.twilioRequest.scheduledDate, this.scheduledTime.meriden);
        this.scheduledTime.minute = this.twilioRequest.scheduledDate.getMinutes();
    }
    this.twilioRequestForm = this.fb.group({
        requestedDate: [this.twilioRequest.requestedDate, [Validators.required]],
        scheduledDate: [this.twilioRequest.scheduledDate],
        requestedReason: [this.twilioRequest.requestedReason, [Validators.required]],
        requestedTime: [this.requestedTime],
        scheduledTime: [this.scheduledTime]
    });
}

updateRequest() {
    if (this.twilioRequestForm.valid) {
        this.twilioRequest.requestedDate = new Date(this.twilioRequestForm.value.requestedDate);
        this.twilioRequest.requestedDate.setHours(DateTimeHelper.calculateHourFromTime(this.requestedTime));
        this.twilioRequest.requestedDate.setMinutes(this.requestedTime.minute);
        this.twilioRequest.requestedDate.setMinutes(DateTimeHelper.getTimezoneOffset(this.twilioRequest.requestedDate));


        if (this.twilioRequestForm.value.scheduledDate) {
            this.twilioRequest.scheduledDate = new Date(this.twilioRequestForm.value.scheduledDate);
            if (this.twilioRequest.scheduledDate) {
                this.twilioRequest.scheduledDate.setHours(DateTimeHelper.calculateHourFromTime(this.scheduledTime));
                this.twilioRequest.scheduledDate.setMinutes(this.scheduledTime.minute);
                this.twilioRequest.scheduledDate.setMinutes(DateTimeHelper.getTimezoneOffset(this.twilioRequest.scheduledDate));
            }
        }

        this.twilioRequest.requestedReason = this.twilioRequestForm.value.requestedReason;
        this.servicerequestservice.updateServiceRequest(this.twilioRequest).subscribe((result) => {
            if (result == 1) {
                this.getTwilioRequestData();
                alert('Service request details updated successfully.');
            } else {
                alert('Something went wrong. Please try again later.');
            }
        });
    }
}

}

Is it possible to integrate the 24 hours functionality ?
I've read your remark that this could be done easily, but I'm not quite familiar with the CSS stuff that is being used here.

Thx

Hi @SteveDunlap13, thanks for this lib. I was wondering if you are planning to publish on npm.

I couldn't find to download from there.
Thanks

ERROR in node_modules/material-time-control/node_modules/@angular/flex-layout/media-query/breakpoints/break-points.d.ts(8,10)
Module has no exported member 'OpaqueToken'
"@angular/animations": "^5.2.1",
"@angular/cdk": "^5.1.0",
"@angular/cli": "^1.6.5",
"@angular/common": "^5.2.1",
"@angular/compiler": "^5.2.1",
"@angular/core": "^5.2.1",
"@angular/flex-layout": "^5.0.0-beta.13",
"@angular/forms": "^5.2.1",
"@angular/http": "^5.2.1",
"@angular/material": "^5.1.0",
"@angular/platform-browser": "^5.2.1",
"@angular/platform-browser-dynamic": "^5.2.1",
"@angular/router": "^5.2.1",

I am getting the following error during the build process:
ERROR in node_modules\material-time-control\src\time-control\w-mat-timepicker\w-mat-timepicker.component.html(14,13): : Property 'time' is private and only accessible within class 'WMatTimePickerComponent'.

Indeed time property is private in WMatTimePickerComponent, hence you cannot bind to it in the template according to this: https://stackoverflow.com/questions/43141576/property-x-is-private-and-only-accessible-within-class-xyzcomponent

Thank you.

PS:
Placeholder is misspelled in the same template: placeholder="Selec time" - Selec instead of Select.

Hi Steve. Its seems I can't get the value of your timepicker in typescript using ngModel.

Or am I doing it wrong?

When you are on the top of an hour, it only inserts one zero instead of two. For example, 12:00 AM becomes 12:0 AM