Date not binding properly to Angular input property

Question

I've made a calendar in my Angular app and I'm trying to pass a specific date that the user clicks on to a child component. The child component is declared like below:

<app-day-view [date]="dateToPass | date:'yyyy-MM-dd'"></app-day-view>

And the child component is set up to take in the input property correctly too:

import { Component, OnInit, Input, Output } from '@angular/core';
import { DateHandlerService } from './../../_services/date-handler.service';

declare var $: any;

@Component({
  selector: 'app-day-view',
  templateUrl: './day-view.component.html',
  styleUrls: ['./day-view.component.css']
})
export class DayViewComponent implements OnInit {

  @Input() date;
  dateString: string;
  constructor(public dateHandler: DateHandlerService) { }

  ngOnInit() {
    $('#dayModal').on('shown.bs.modal', this.getDateString);
  }

  getDateString() {
    //this.dateString = this.dateHandler.convertToOutDate(this.date);
  }
}

The intended behaviour is that I click one of the days in my calendar and <app-day-view>, which is a modal, opens, takes dateToPass, which I've confirmed already stores the correct date, and sends it to the child component. This template doesn't throw any errors, but by the time I check the date inside the DayViewComponent, it's undefined.

I assumed it was an issue caused by the child component existing in the parent component before being opened. The date input property would technically be undefined until I clicked on a day in the calendar, after which it would suddenly become defined, but I'm not sure if Angular input properties work like this. To get around this, I used JQuery to check the modal's shown.bs.modal event, and I only try to use the date after that event has fired, but the date still seems to come out as undefined.

Krenom · Accepted Answer · 2020-02-29 11:31:32Z

2

If your child calendar component exists in the DOM before you actually have a value in dateToPass, then undefined will go to your input.

I'll admit to not playing with the pipes much, but will that not attempt to turn your date input into a string input? If you have a Date as an input, just give it the Date object as-is instead of trying to format it (unless the component actually wants a string input).

Aside from that, at the time you attempt to see the value, in your ngOnInit method, you haven't passed any value to it, unless you're wrapping that component in an *ngIf.

Any subsequent change to the value of dateToPass won't cause you to hit the ngOnInit method again - that's literally only hit once at component initialisation, which has already been hit.

You can either hook into Angular's change detection, or switch your input to be a setter...

@Input() public set date(value: Date) {
  this.onDateChanged(value);
}

private onDateChanged(date: Date): void {
  console.log(`Date value changed to: ${date}`);
}

If you want to ensure that your component has an input value, then hide it (actually remove it from the dom, not just have it 'hidden') with an *ngIf:

<div *ngIf="dateToPass">
  <app-day-view [date]="dateToPass"></app-day-view>
</div>

This will make Angular only render (and initialise) your component once you have actively set a value - thus guaranteed to have a value available to you on ngOnInit for you to check out.

answered Feb 29, 2020 at 11:31

Krenom

2,1282 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Grizzly Over a year ago

Both very sensible solutions. I was thinking that using JQuery to listen for the modal show event would act more like a subscription, in that it needed to be called only once to trigger every time, regardless of if the component had already been initialized. I used the change detection approach and it seems to work. I'm going to read up a little on it for now. Thanks for the help.

Vishnu Shenoy · Accepted Answer · 2020-02-29 11:29:41Z

1

I think the issue is because of ngOnit value is undefined at the start because response is taking time.

Use ngOnChanges() instead of ngOnit

Just console.log in ngOnChanges() if value comes, add a if condition

    ngOnChanges(){
    console.log(date);
     $('#dayModal').on('shown.bs.modal', this.getDateString);
    }

 getDateString() {
    if(date){
        //this.dateString = this.dateHandler.convertToOutDate(this.date);
      }
    }

answered Feb 29, 2020 at 11:29

Vishnu Shenoy

8726 silver badges26 bronze badges

Collectives™ on Stack Overflow

Date not binding properly to Angular input property

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related