ListView template's child components aren't updated

[jzgoda]

I ran into a weird issue with a ListView who's template had a child component. When I started scrolling down and back up in the ListView, the child components started to change which parent template they were associated with.

I made a sample app to illustrate this problem.
(There's an animated GIF in the README that shows the odd behavior.)

I attempted to move the template code into it's own component, which didn't solve this issue. (I read that solved another, somewhat similar, issue.)

This child component has an @Input which is passed to it by the parent template, and then OnInit sets a instance variable based on that data.

export class SubComponentComponent implements OnInit {
	@Input() myItem: number;
	count: number = 0;

	ngOnInit(): void {
		this.count = this.myItem;
	}
}

It's the OnInit that seems to be the issue, or rather the wrong solution, and an OnChanges should be used here. Once I switched to OnChanges, I was able to pass the currentValue of the changed @Input to the instance variable, and all was good. (I posted that commit to the above repo as well.)

export class SubComponentComponent implements OnChanges {
	@Input() myItem: number;
	count: number = 0;

	ngOnChanges(changes: SimpleChanges) {
		this.count = changes['myItem'].currentValue;
	}
}

I'm wondering if this is a bug, or just something that needs to be documented? It certainly wasn't obvious to me that a ListView template component's children could become associated with another component. (Although I can guess that this has to do with the reuse of allocated visual elements, but still figured that it would trickle down to child components.)

Let me know if there is anything else you need me to provide.

[NickIliev]

Hey @jzgoda thank you for your project and great explanations of the issue you have encountered - indeed I think this is a good addition for a documentation article or sdk example.

The solution with using onChanges is the way to go when you want watch the immutable input in your child component. Great blog post on that matter can be found here (the approach you have used is shown at the end of the article as the right solution for similar scenario)

[jzgoda]

@NickIliev, thanks for clearing that up!
It definitely makes sense now.

[NickIliev]

Example added in nativescript-sdk-examples-ng application via this PR. @jzgoda the sample will also appear in our documentation after the official release - once again thank you for noticing this one!