Custom component @Input with *ngFor shows undefined


I’ve got a component with an @Input field. The input field is getting undefined as it’s value. Here is the html:

<ion-card (click)="editTask(task)" *ngFor="let task of dataService.myData.tasks">


<p class="floatLeft">{{}}</p>

<p class="floatRight">Created: {{task.createDate}} <ptt-date [dateIn]="task.createDate"></ptt-date></p>



The {{task.createDate}} displays the value, and will be replaced by the custom component when I get it working.

But the dateIn @input in my custom component shows undefined. How do I pass the task.createDate into my custom component.



“shows undefined” is sort of vague. Nothing will be available in input properties before ngOnChanges() is called.


Sorry for the vagueness, in my custom component class I have the following:

export class PTTDate {

@Input(‘dateIn’) dateIn: any;
dateOut: string;

constructor() {
this.dateOut = PTTDateHelpers.displayDate(this.dateIn);
console.log(‘Displaying: ’ + this.dateIn + ’ as date:’ + this.dateOut);


And this.dateIn contains undefined.


Yes, because the constructor is called before ngOnChanges(), and input properties are not bound yet.


Sorry I’m new to this. None of the examples of writing a custom component used ngOnChanges. They seemed like they would work fine accessing the fields bound to the @Input in the constructor. I’ll try to lookup ngOnChanges and see what I need to add.

Note that the data for these should never change, this component is just to encapsulate date formatting for display.


Moved my code to ngOnChanges and it worked fine. Thanks much.