How to set Angular2 component input conditionally?

Question

Consider the following case.

Parent component:

<div title="title1">
  <my-component input="title2"></my-component>
  <my-component></my-component>
</div>

MyComponent:

<div [title]="input">ABC</div>

The problem here is that first "ABC" div will have the "title2" tooltip while the second one will have whatever MyComponent has as default value for input, and this will "override" "title1" tooltip which is not desired.

How can I avoid setting "title" in MyComponent template if no "input" is received?

This may help stackoverflow.com/questions/41273384/…

venu
– venu

2018-07-17 14:52:12 +00:00
Commented Jul 17, 2018 at 14:52 — venu
– venu, Commented Jul 17, 2018 at 14:52

Martin Parenteau · Accepted Answer · 2018-07-17 15:34:43Z

1

It appears that binding the title property of the child element will override the parent title, even when input is null or undefined. However, according to this stackblitz, binding the title attribute with [attr.title] allows to inherit the parent title when input is null or undefined:

<div [attr.title]="input">ABC</div>

with

@Input() input: string; // undefined by default

edited Jul 17, 2018 at 15:34

answered Jul 17, 2018 at 15:16

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

How to set Angular2 component input conditionally?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related