Accessing component properties from another component

Question

I am new to angular and trying to implement a custom material datepicker component (one that only allows month and year selection) and am having trouble accessing its value from a separate component. I modified one of the examples from https://v7.material.angular.io/components/datepicker/overview and am trying to use the suggestions from this particular stackoverflow post/answer: https://stackoverflow.com/a/50723598 (Angular 7+ section).

Here's my month-year-datepicker.component.html:

<mat-form-field class="reporting-datepicker">
  <input matInput [matDatepicker]="dp" [(ngModel)]="inputValue" (ngModelChange)="inputValueChange.emit(inputDPValue)" [min]="minDate">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp
                  [startView]="viewMode"
                  (yearSelected)="chosenYearHandler($event, dp)"
                  (monthSelected)="chosenMonthHandler($event, dp)"
                  panelClass="">
  </mat-datepicker>
</mat-form-field>

Here's my month-year-datepicker.component.ts (the relevant parts):

@Component({
  selector: 'month-year-datepicker',
  templateUrl: 'month-year-datepicker.component.html',
  styleUrls: ['month-year-datepicker.component.css'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}
  ],
})

export class MonthYearDatepicker {
  viewMode: string = "year";
  minDate: Moment;

  @Input() yearOnly: boolean = false;
  @Input() inputValue: Moment;
  @Output() inputValueChange: EventEmitter<Moment> = new EventEmitter<Moment>();

  constructor() {}

  ngOnInit() {
    if (this.yearOnly)
      this.viewMode = "multi-year"
    this.minDate = moment().subtract(5, 'months');
  }  

  chosenYearHandler(normalizedYear: Moment, datepicker: MatDatepicker<Moment>) {
    var ctrlValue = moment(this.inputValue);
    ctrlValue.year(normalizedYear.year());
    this.inputValue = ctrlValue;
    if (this.yearOnly) datepicker.close();
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    var ctrlValue = moment(this.inputValue);
    ctrlValue.month(normalizedMonth.month());
    this.inputValue = ctrlValue;
    datepicker.close();
  }
}

And then, in my separate reporting.component.html file, I am adding the datepicker like:

<month-year-datepicker [yearOnly]="false" [(inputValue)]="datepickerValue" ngDefaultControl></month-year-datepicker>

However, in my separate reporting.component.ts file (simplified), I cannot access the value of datepickerValue:

export class ReportingComponent extends ComponentBase implements OnInit, OnDestroy {

  datepickerValue: Date;

  constructor() {}
  ngOnInit(){}

  getDate() {
    return this.datepickerValue; // <- this is undefined still
  }

}

I'm obviously missing something or misunderstanding how the binding works between components and would greatly appreciate any help! Thanks!

Have you tried to subscribe to the inputValueChange event from inside the MonthYearDatepicker component, to see if the event fires? — Sebastian Münster, Sep 28 '19 at 12:33

score 0 · Answer 1 · answered Sep 28 '19 at 13:42

Update

(ngModelChange)="inputValueChange.emit(inputDPValue)"

to

(ngModelChange)="inputValueChange.emit($event)"

Also update this typo [(ngModel)]="inputValue" to [ngModel]="inputValue" since you're already also using the (ngModelChange) syntax. It's unlikely to be breaking anything, but you should use one syntax or the other, not both.

Accessing component properties from another component

1 Answers1