Angular - Directives - Triggering @Input setter with "null" vs ""(empty string)

Question

I've noticed that @Input setter in a Directive is not initially called when in the template a value of an empty string ("") is provided. But when the value of "null" or "false" is provided, the setter method is called.

Why is that?

As far as I've read, an empty string is a falsy value in JS, so why passing an empty string does not work as "null" or "false"? Is it a feature?

DIRECTIVE:

@Directive({
  selector: '[myInputDir]'
})

export class ExampleDirectiveClass {
  @Input('myInputDir') public set valFromMyInput(value: string) {
    if (value) {
      this._inputVal = value;
    } else {
      this._inputVal = 'setUpVal';
    }
  }
(... rest of the class)
}

HTML

(...)
<input
  [myInputDir]="">
</input>
(...)

I suspect it is because empty string ("") is take it as default value of string — Amal Shalika
– Amal Shalika, Commented Sep 11, 2020 at 10:14
The answers given by Mat-Dob-Dev and user3548205 are valid. Basically, when not providing anything, undefined is "provided". And it seems that undefined, even if it is a falsy value, does not trigger a setter. — Aleks Grunwald
– Aleks Grunwald, Commented Sep 15, 2020 at 9:53

Mat-Dob-Dev · Accepted Answer · 2020-09-11 15:41:45Z

3

In given example you're not providing empty string. You're not providing any value at all (thus setter has not been called).

Invalid example (no value at all):

<input
  [myInputDir]="">
</input>

Valid example of providing empty string as input value:

<input
  [myInputDir]="''">
</input>

The square brackets around input name tell Angular to evaluate the template expression inside quotation marks.

answered Sep 11, 2020 at 15:41

Mat-Dob-Dev

1995 bronze badges

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

Comments

user3548205 · Accepted Answer · 2020-09-13 19:10:15Z

1

The variable you want to pass to the attribute is missing. You donate nothing, which is undefined.

<input
  [myInputDir]="putAnyVariableHere">
</input>

answered Sep 13, 2020 at 19:10

user3548205

814 bronze badges

1 Comment

Aleks Grunwald Over a year ago

Yes, it makes sense. It's so simple.. I guess, when writing this question, I've "forgotten" that it's HTML and empty quotation marks just don't hold any value themselves.

Collectives™ on Stack Overflow

Angular - Directives - Triggering @Input setter with "null" vs ""(empty string)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related