Ionic @Input() Interface Class Issues

Ionic Framework ionic-v3
1

HI,

In my app I face a problem every time I declare a interface or a class using the @Input() decorator at the top of my components.

Example: Not Working

export class UserDisplayPage{
@Input()
user: User;
}

After much testing I figured that if I assigned a value for my declarations it works fine.

Like this

export class UserDisplayPage{
@Input()
user: User = {“id”:0, “name”:“Tom”};
}

This looks very similar to the following issue I found on line.
https://github.com/angular/angular-cli/issues/2034

The interface file looks like this.

export interface User{
id: number,
name: string
}

I also tried by exporting the interface as a class. No luck there as well.

Just wanted to know if I am missing some thing here. Since the User interface that I use has more fields (sample here has been shown with just 2 fields.) it becomes impractical to assign dummy values in each component when i declare the user with the @Input decorators.

I use the “User” interface to show information on load of component.

Any advice is much appreciated.

Cheers,
SD

2

It’s tough to say much from something so vague as “not working”, but is there a chance that you are trying to access the property before it has been bound? ngOnChanges() is the only reliable place where you know the bound value has come in.

3

Hey,
Thank you for the time. I figured out the issue.
It was that I was trying to display the user data which was based on the value coming in from navParams.
I solved it by putting a ngIf on the div that was displaying the data and I forced the div to not display till the declared User interface variable until the data was bound to the variable. The work around could be implementing a ngOnInit on the page. But for my case since the data was being accessed from storage I felt it was a overkill at least at this point in time in my app. So I choose to use the ngIf to hold the dom from loading till the data was available for display.

Cheers.