angular (v4) wrapper for flatpickr

DateTimePickerComponent.ts

import { Component, ViewChild, AfterViewInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import * as Flatpickr from 'flatpickr';

@Component({
  selector: 'app-date-time-picker',
  templateUrl: './date-time-picker.component.html',
  styleUrls: ['./date-time-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DateTimePickerComponent),
      multi: true
    }
  ]
})
export class DateTimePickerComponent implements ControlValueAccessor, AfterViewInit {
  @ViewChild('date') dateEl: any;
  data: any;
  picker: any;

  public writeValue(obj: any) {
    if (obj) {
      this.data = obj;
    }
  }

  public registerOnChange(fn: any) {
    this.propagateChange = fn;
  }

  public ngAfterViewInit() {
    this.picker = new Flatpickr(this.dateEl.nativeElement, {
      minDate: 'today',
      altInput: true,
      enableTime: true,
      altFormat: 'l J F Y @ h:iK',
      onChange: (date) => this.propagateChange(date[0] || '')
    });
  }

  // not used, used for touch input
  public registerOnTouched() {
  }

  private propagateChange = (_: any) => {};

}