title: Ng-Bootstrap date/time picker errors in Angular
body: <p>I am using ng-bootstrap's date/time picker in a form. I have tried to implement this: </p>
  
  <p><a href="https://stackblitz.com/edit/angular-datetimepicker?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-datetimepicker?file=src%2Fapp%2Fapp.component.html</a></p>
  
  <p>I am getting the following errors in the component.ts file:</p>
  
  <pre><code>Property 'year' does not exist on type 'string | NgbDateStruct'.
  Property 'year' does not exist on type 'string'.
  </code></pre>
  
  <p>Same goes for month and day and also I am getting:</p>
  
  <pre><code>Argument of type 'string | NgbDateStruct' is not assignable to parameter of type 'string'.
  Type 'NgbDateStruct' is not assignable to type 'string'.
  </code></pre>
  
  <p>the components file is:</p>
  
  <pre><code>import { Component, OnInit, Input, forwardRef, ViewChild, AfterViewInit, Injector } from '@angular/core';
  import { NG_VALUE_ACCESSOR, ControlValueAccessor, NgControl } from '@angular/forms';
  import { DatePipe } from '@angular/common';
  import { DateTimeModel } from './date-time.model';
  import { noop } from 'rxjs';
  import { NgbDatepickerConfig, NgbCalendar, NgbDate, NgbPopoverConfig, NgbPopover, NgbDatepicker, NgbDateStruct, NgbTimeStruct} from '@ng-bootstrap/ng-bootstrap';
  
  
  @Component({
    selector: 'app-date-time-picker',
    templateUrl: './date-time-picker.component.html',
    styleUrls: ['./date-time-picker.component.scss'],
    providers: [
      DatePipe,
      {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() =&gt; DateTimePickerComponent),
          multi: true
      }
  ]
  })
  export class DateTimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit {
    @Input()
    dateString: string;
  
    @Input()
    inputDatetimeFormat = 'yyyy/MM/dd hh:mm:ss';
    @Input()
    hourStep = 1;
    @Input()
    minuteStep = 15;
    @Input()
    secondStep = 30;
    @Input()
    seconds = true;
  
    @Input()
    disabled = false;
  
    private showTimePickerToggle = false;
  
    private datetime: DateTimeModel = new DateTimeModel();
    private firstTimeAssign = true;
  
    @ViewChild(NgbDatepicker)
    private dp: NgbDatepicker;
  
    @ViewChild(NgbPopover)
    private popover: NgbPopover;
  
    private onTouched: () =&gt; void = noop;
    private onChange: (_: any) =&gt; void = noop;
  
    private ngControl: NgControl;
  
    constructor(private config: NgbPopoverConfig, private inj: Injector ) {
        config.autoClose = 'outside';
        config.placement = 'auto';
    }
  
    ngOnInit(): void {
        this.ngControl = this.inj.get(NgControl);
    }
  
    ngAfterViewInit(): void {
        this.popover.hidden.subscribe($event =&gt; {
            this.showTimePickerToggle = false;
        });
    }
  
    writeValue(newModel: string) {
        if (newModel) {
            this.datetime = Object.assign(this.datetime, DateTimeModel.fromLocalString(newModel));
            this.dateString = newModel;
            this.setDateStringModel();
        } else {
            this.datetime = new DateTimeModel();
        }
    }
  
    registerOnChange(fn: any): void {
        this.onChange = fn;
    }
  
    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
  
    toggleDateTimeState($event) {
        this.showTimePickerToggle = !this.showTimePickerToggle;
        $event.stopPropagation();
    }
  
    setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }
  
    onInputChange($event: any) {
        const value = $event.target.value;
        const dt = DateTimeModel.fromLocalString(value);
  
        if (dt) {
            this.datetime = dt;
            this.setDateStringModel();
        } else if (value.trim() === '') {
            this.datetime = new DateTimeModel();
            this.dateString = '';
            this.onChange(this.dateString);
        } else {
              this.onChange(value);
        }
    }
  
    onDateChange($event: string | NgbDateStruct) {        
        if ($event.year){
          $event = `${$event.year}-${$event.month}-${$event.day}`
        }
  
        const date = DateTimeModel.fromLocalString($event);
  
        if (!date) {
            this.dateString = this.dateString;
            return;
        }
  
        if (!this.datetime) {
            this.datetime = date;
        }
  
        this.datetime.year = date.year;
        this.datetime.month = date.month;
        this.datetime.day = date.day;
  
        this.dp.navigateTo({ year: this.datetime.year, month: this.datetime.month });
        console.log(this.datetime);
        this.setDateStringModel();
    }
  
    onTimeChange(event: NgbTimeStruct) {
        this.datetime.hour = event.hour;
        this.datetime.minute = event.minute;
        this.datetime.second = event.second;
  
        this.setDateStringModel();
    }
  
    setDateStringModel() {
        this.dateString = this.datetime.toString();
  
        if (!this.firstTimeAssign) {
            this.onChange(this.dateString);
        } else {
            // Skip very first assignment to null done by Angular
            if (this.dateString !== null) {
                this.firstTimeAssign = false;
            }
        }
    }
  
    inputBlur($event) {
        this.onTouched();
    }
  }
  </code></pre>
  
  <p>The errors are here:</p>
  
  <pre><code>onDateChange($event: string | NgbDateStruct) {        
        if ($event.year){
          $event = `${$event.year}-${$event.month}-${$event.day}`
        }
  
        const date = DateTimeModel.fromLocalString($event);
  
        if (!date) {
            this.dateString = this.dateString;
            return;
        }
  </code></pre>
  
  <p>Any idea's would be very helpful. Thanks</p>