Unable to pass data from parent to child in angular

Issue

I am new to angular, I have an array data in parent component which i am passing to child component. In child component the length of array coming as zero.

Code

https://stackblitz.com/edit/angular-jrkvg1-hzvbjz?file=src%2Fapp%2Fstudent-dashboard%2Fcontainers%2Fstudent-dashboard%2Fstudent-dashboard.component.ts,src%2Fapp%2Fstudent-dashboard%2Fcomponents%2Fstudent-count%2Fstudent-count.component.ts,src%2Fapp%2Fstudent-dashboard%2Fstudent-dashboard.module.ts

As a expected result count should be 5 but receiving as zero.

Could anyone help me out here, not sure what i am missing.

Solution

You're not passing the value to the child component correctly.

Currently you have:

<student-count>
  [items] = "students"
</student-count>

This should be:

<student-count [items]="students"></student-count>

Properties are passed via [] and events/handlers use (). Two-way binding uses [()].

Keep in mind that @Input only invokes change detection when the reference changes. So with arrays and objects, change detection won't respond if a member of the array changes, or a property on an object changes.

You have to pass an entirely new array or object to @Input to get change detection to work as expected.

Answered By - Brandon Taylor