Angular: How to get default @Input value?

Question

We are developing components and when using them, we would like to use the same mechanism like for DOM nodes to conditionally define attributes. So for preventing attributes to show up at all, we set the value to null and its not existing in the final HTML output. Great!

<button [attr.disabled]="condition ? true : null"></button>

Now, when using our own components, this does not work. When we set null, we actually get null in the components @Input as the value. Any by default set value will be overwritten.

...
@Component({
    selector: 'myElement',
    templateUrl: './my-element.component.html'
})

export class MyElementComponent {
    @Input() type: string = 'default';
...

<myElment [type]="condition ? 'something' : null"></myElement>

So, whenever we read the type in the component, we get null instead of the 'default' value which was set.

I tried to find a way to get the original default value, but did not find it. It is existing in the ngBaseDef when accessed in constructor time, but this is not working in production. I expected ngOnChanges to give me the real (default) value in the first change that is done and therefore be able to prevent that null is set, but the previousValue is undefined.

We came up with some ways to solve this:

• defining a default object and setting for every input the default value when its null
• addressing the DOM element in the template again, instead of setting null

<myElement #myelem [type]="condition ? 'something' : myelem.type"></myElement>

• defining set / get for every input to prevent null setting

_type: string = 'default';
@Input()
set type(v: string) {if (v !== null) this._type = v;}
get type() { return this._type; }

but are curious, if there are maybe others who have similar issues and how it got fixed. Also I would appreciate any other idea which is maybe more elegant.

Thanks!

Answer 1

There is no standard angular way, because many times you would want null or undefined as value. Your ideas are not bad solutions. I got a couple more

1. I suppose you can also use the ngOnChanges hook for this:

@Input()
type: string = 'defaultType';

ngOnChanges(changes: SimpleChanges): void {
 // == null to also match undefined
 if (this.type == null) {
    this.type = 'defaultType';
  }
}

2. Or using Observables:

private readonly _type$ = new BehaviorSubject('defaultType');

readonly type$ = this._type$.pipe(
  map((type) => type == null ? 'defaultType' : type)
); 

@Input()
set type(type: string) {
  this._type$.next(type);
}

3. Or create your own decorator playground

function Default(value: any) {
  return function(target: any, key: string | symbol) {
    const valueAccessor = '__' + key.toString() + '__';

    Object.defineProperty(target, key, {
      get: function () {
        return this[valueAccessor] != null ? this[valueAccessor] : value
      },
      set: function (next) {
        if (!Object.prototype.hasOwnProperty.call(this, valueAccessor)) {
          Object.defineProperty(this, valueAccessor, {
            writable: true,
            enumerable: false
          });
        }

        this[valueAccessor] = next;
      },
      enumerable: true
    });
  };
}

which you can use like this:

@Input()
@Default('defaultType')
type!: string;

Answer 2

Just one more option (perhaps simpler if you don't want to implement your own custom @annotation) based off Poul Krujit solution:

const DEFAULT_VALUE = 'default';
export class MyElementComponent {
  typeWrapped = DEFAULT_VALUE;

  @Input()
  set type(selected: string) {
    // this makes sure only truthy values get assigned
    // so [type]="null" or [type]="undefined" still go to the default.
    if (selected) {
      this.typeWrapped = selected;
    } else {
      this.typeWrapped = DEFAULT_VALUE;
    }
  }
  get type() {
    return this.typeWrapped;
  }
}

Answer 3

If you need to do this for multiple inputs, you can also use a custom pipe instead of manually defining the getter/setter and default for each input. The pipe can contain the logic and defaultArg to return the defaultArg if the input is null.

i.e.

// pipe
@Pipe({name: 'ifNotNullElse'})
export class IfNotNullElsePipe implements PipeTransform {
  transform(value: string, defaultVal?: string): string {
    return value !== null ? value : defaultVal;
  }
}

<!-- myElem template -->
<p>Type Input: {{ type | ifNotNullElse: 'default' }}</p>

<p>Another Input: {{ anotherType | ifNotNullElse: 'anotherDefault' }}</p>