Angular - How to set default values for optional input properties

Question

I wonder what is the "Angular/Typescript way" to set up default values for optional properties in Angular component? I am having troubles when values passed to optional properties are null or undefined.

Currently I am having something like this:

export class FooComponent implements OnInit {
  @Input() foo = 'foo';
  @Input() bar = 0;
  @Input() baz?: string;
}

If you declare default value, you dont have to specify type since it is type of assigned value and property is optional by default. This is the case of bar and foo properties.

Alternatively you can use ? to mark that this property is optional but you cant declare its default value. This is the case of baz property.

Now let us see what happens when you pass different values to those properties.

<app-foo-component
  [foo]
  [bar]="null"
  [baz]="undefined"
>
</app-foo-component>

if I console log these properties, this is what I got:

foo will be correctly 'foo'

bar will be null

baz will be undefined

Is there a elegant way to also set default values when passed values are null/undefined or do I need some checking in OnInit like this?

OnInit() {
  this.bar = this.bar || 0;
}

It feels like there is some way to do this. To me, optional property means that value could be missing, null or unset but when I want to set default value, it only works when property is missing or empty. It still set value as null or undefined in these cases and that seems to be confusing.

Answer 1

Here is the PROPER best solution for this. (ANGULAR 7,8, 9)

Addressing solution: To set a default value for @Input variable. If no value passed to that input variable then It will take the default value.

Example:

I have an object interface named car:

export interface car {
  isCar?: boolean;
  wheels?: number;
  engine?: string;
  engineType?: string;
}

You made a component named app-car where you need to pass the properties of car with @input decorator of angular. But you want that isCar and Wheels properties must have a default value (ie.. isCar: true, wheels: 4)

You can set a default to that object as per below code:

export class CarComponent implements OnInit {
  private _defaultCar: car = {
    // default isCar is true
    isCar: true,
    // default wheels  will be 4
    wheels: 4
  };

  @Input() newCar: car = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newCar )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newCar = { ...this._defaultCar, ...this.newCar };
   //  console.log(this.newCar);
  }
}

For more detailed article refer this.

Refer Destructuring assignment from here

Answer 2

You could define bar as a getter/setter property, and make sure that the default value is applied in the setter when necessary:

private _bar = 0;

@Input() get bar() {
  return this._bar;
}
set bar(value) {
  this._bar = value || 0;
}

See this stackblitz for a demo.

Answer 3

I have same problem when having some nested child components.

Finally this worked for me:

  @Input()
  public foo;
  get fooWithDefault() {
    return this.foo ?? 'any default value';
  }

then i used fooWithDefault property in template instead of foo.