Angular : Data-Binding with Array as a value

Question

My question is, how do I pass an Array of items as a data-binding value?

In my case I give my angular component via @Input() an Array of IValues.
But when I check the the @Input() variable that should've received the array it just prints out an Array of objects and not an Array of IValues eventhough I gave it the type IValues.

Component (FoodListPage) with data:

export class FoodListPage implements OnInit {
  foods: IValues[]; // <-- My data to pass
  category: string;

  constructor(private router: Router) {
    this.category = this.router.getCurrentNavigation().extras.state.categoryName; 
    this.foods = this.router.getCurrentNavigation().extras.state.values;
    console.log("food-list-data: ", this.foods);
  }

  ngOnInit() {}
}

The html of the component FoodListPage

<ion-content>
  <app-header title="{{category}}"></app-header>
  <app-food-listing values="{{foods}}"></app-food-listing> <!-- Here I pass the value (array of IValues) -->
  <app-nav-button page="main-menu"></app-nav-button>
</ion-content>

FoodListingComponent that should receive the value (array of IValues)

export class FoodListingComponent implements OnInit {
  @Input() values: IValues[];

  constructor() { }

  ngOnInit() {
    console.log("food-listing-data: ", this.values); //Console log (actual)
  }
}

Expected data: (4) [{…}, {…}, {…}, {…}] <-- Are all from type IValue
Actual data: [object Object],[object Object],[object Object],[object Object] <-- Are just from the type "Object"...

Answer 1

Please check the below stackblitz, you need to pass non primitive types such as array and objects using the angular property binding [values]="foods" only then the type will be maintained.

<ion-content>
  <app-header [title]="category"></app-header><!-- changed here -->
  <app-food-listing [values]="foods"></app-food-listing> <!-- changed here -->
  <app-nav-button page="main-menu"></app-nav-button>
</ion-content>

forked stackblitz