Custom component @Input with *ngFor shows undefined

Ionic Framework ionic-v3
1

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">

<ion-card-header>

<p class="floatLeft">{{task.name}}</p>

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

</ion-card-header>

<ion-card-content>

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.

Thanks,
Jon

2

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

3

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.

4

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

1 Like
5

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.

6

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