CODEWITHSUNDEEP
javascriptangularangular-input
Varun Sukheja
Varun Sukheja

Reputation: 6526

Angular Input() takes undefined after providing default value

Below is Input decorator used with 3 variables and assigned default values to each variable

  @Input() score: number = 0;
  @Input() text: string = 'test';
  @Input() color: string = 'red';

This is how I am passing values to the component inside a ngFor.

  [text]="item.name"
  [score]="item.score"
  [color]="item.color"

If my item object does not contain color property then the color variable in the component should take 'red' as default value.

But when I log it as :

ngOnInit() {
    console.log(this.score, this.text, this.color);
  }

then the color variable takes undefined as value.

Here is the console for above logs for

8 "English" undefined
6 "Spanish" "blue"

The 1st log is when the item does not contain color property, and 2nd is when it contains property color with value blue

Upvotes: 13

Views: 9753

Answers (3)

umutyerebakmaz
umutyerebakmaz

Reputation: 1037

    ngOnInit(): void {
        this.color = this.color || 'red';
    }

Upvotes: 0

user11523681
user11523681

Reputation:

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!

Upvotes: 1

Saksham
Saksham

Reputation: 9380

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

Upvotes: 15

Related Questions