Ionic @Input() Interface Class Issues



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{
user: User;

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

Like this

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

This looks very similar to the following issue I found on line.

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.



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.


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.