Angular Input() takes undefined after providing default value

The default value means when you are not passing any value, then angular puts the default value. But here you are passing undefined (when the property does not exist) and it's pretty obvious that angular puts undefined as color variable.

You can fix this by putting the default value into your array first :

let arr = [
{score:  6, text: "Spanish" color : "blue" },
{score:  8, text: "English" }
]

arr.forEach(function(item, index, theArray) {
  if(theArray[index].color == undefined){
      theArray[index].color = "red";
  }
});

Not tested but it should work!


You can use a setter to the input property to determine whether it is a valid value or not and assign it to a default value as

private color: string;

@Input('color')
set Color(color: string) {
    this.color = color || 'red';
}

A sample created at https://stackblitz.com/edit/angular-setter-for-null-input-property