Angular Input() takes undefined after providing default value

Question

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

score 13 · Accepted Answer · answered Jun 12 '19 at 19:12

13

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

answered Jun 12 '19 at 19:12

Saksham

9,037
7
45
73

Typescript throws @angular-eslint/no-input-rename for this so it doesn't seem like the correct fix. – Kaspar Püüding Dec 29 '20 at 10:08
Thats linting, not typescript. Your code styles are different then Saksham: just rename as `@Input() set color(color: string)` – Jan 'splite' K. Jan 05 '23 at 16:58

score 1 · Answer 2 · 2019-06-12T19:12:56.253

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!

score 0 · Answer 3 · answered Sep 28 '22 at 08:57

0

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

answered Sep 28 '22 at 08:57

umutyerebakmaz

887
8
18

Angular Input() takes undefined after providing default value

3 Answers3