2

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?

Jaa-c
  • 5,017
  • 4
  • 34
  • 64
noitseuq
  • 610
  • 1
  • 7
  • 19
  • This may help https://stackoverflow.com/questions/41273384/how-to-get-the-parent-dom-element-reference-of-an-angular2-component – venu Jul 17 '18 at 14:52

1 Answers1

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
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146