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

Saksham · Accepted Answer · 2019-06-12 19:12:24Z

16

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, 2019 at 19:12

Saksham

9,4209 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaspar Püüding Over a year ago

Typescript throws @angular-eslint/no-input-rename for this so it doesn't seem like the correct fix.

Jan 'splite' K. Over a year ago

Thats linting, not typescript. Your code styles are different then Saksham: just rename as @Input() set color(color: string)

score 1 · Accepted Answer · 2019-06-12 19:12:56Z

1

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!

edited Jun 12, 2019 at 19:12

answered Jun 12, 2019 at 19:06

user11523681

Comments

umutyerebakmaz · Accepted Answer · 2022-09-28 08:57:51Z

0

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

answered Sep 28, 2022 at 8:57

umutyerebakmaz

1,03710 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular Input() takes undefined after providing default value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related