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!

possible duplicate of stackoverflow.com/questions/35839120/… and stackoverflow.com/questions/36071942/… — Naga Sai A
– Naga Sai A, Commented Nov 4, 2019 at 15:36

Poul Kruijt · Accepted Answer · 2019-11-11 09:08:37Z

4

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

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';
  }
}

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);
}

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;

edited Nov 11, 2019 at 9:08

answered Nov 4, 2019 at 15:39

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

8 Comments

Fabian Over a year ago

The third solution looks very promising. Unfortunatelly it is not working as soon you have a component more than one time. All components will receive the same type set from outside, even if some or one got null he will get the type from the other component. As this looks the most promising I will look further into it and see where is ( i made ) the mistake :) Thanks!

Poul Kruijt Over a year ago

@Fabian I should not have posted untested code :) anyways, I've updated my answer. We obviously need to use a value accessor property, so that it's different for every instance.

Fabian Over a year ago

I got already a working version together by myself, thanks a lot for the update. Now it works like a charm! ;) Thank you for the idea of creating own decorators.

Poul Kruijt Over a year ago

@Fabian You're welcome :) how did you manage to make it work for multiple class instances?

Poul Kruijt Over a year ago

@Fabian I've updated my answer a bit from the decorator, because I noticed that in a for .. in loop it would show the value accessor property as well. By declaring it directly in the this.set and setting enumerable to false it won't show up anymore.

|

tomasdev · Accepted Answer · 2020-12-04 12:34:12Z

0

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;
  }
}

edited Dec 4, 2020 at 12:34

answered Nov 23, 2020 at 15:23

tomasdev

6,0011 gold badge35 silver badges40 bronze badges

2 Comments

Poul Kruijt Over a year ago

the issue with this, if you first have a value on the input, and then set this value to null or undefined it won't change the typeWrapped property, and your default value is gone.

tomasdev Over a year ago

I've updated my proposal to include that case.

christian · Accepted Answer · 2019-11-04 15:44:19Z

-1

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>

answered Nov 4, 2019 at 15:44

christian

1,7852 gold badges13 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular: How to get default @Input value?

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related