Angular2 component one-way binding or input?

Question

In angular 2, if I see <element [x]='' ..>, how do I know x is a directive that causes one-way data binding (such as [ngClass], or [nyStyle]) or it is an input of an Angular component applied to this tag (inputs in component configuration)?

What do you mean by "it is an input of another component"? It can either be an input of an Angular component applied to this tag, an Angular directive applied to this tag, or a property of the native element (or a combination of them). — Günter Zöchbauer, Mar 20 '16 at 15:32
I guess the debug tools will provide means to investigate what component and directives were applied, but they are quite limited currently. — Günter Zöchbauer, Mar 20 '16 at 16:22

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

I don't think that you can distinguish them by some coding technique, but

if you just want to find out what this [x] is doing here ? then

There are three things that it might be doing there

1. It's an Angular Directive eg: [ngModel] [ngIf]

to confirm this you can search for the attribute here.

2. It's a Custom Directive eg: [directiveToConsoleLogTheContentOfAnInputField]

to confirm this you must be aware of your custom written directives.

3. It's just an Input/Output property or ( [oneWay]/ [(twoWay)] binding) for <element> component.

to confirm this just go to the <element> component's .ts file and see if it's one of the input or output properties.

Update: For more details see @MarkRajcok's answer. (Yes, I don't think that I know better.)

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 20 '16 at 06:55

Ankit Singh

24,525
11
66
89

I believe 1. and 2. are only true if the angular or custom directive/component uses an attribute selector with the same name as an input property (see my answer for details). – Mark Rajcok Mar 21 '16 at 19:25
Can you give an example for item 4. -- i.e., where the HTML syntax is ` – Mark Rajcok Mar 21 '16 at 19:31
I just assumed that I'm answering for both `[x]` and `x`. I'm not sure why I did that. – Ankit Singh Mar 21 '16 at 19:39

score 2 · Answer 2 · edited May 23 '17 at 12:09

The syntax is ambiguous (if you're just reading the HTML template), which is something I don't like. I've asked about this previously (no answers yet): Why does simply [myHighlight]="..." work for an attribute directive?

Assuming [x] is not [style.x] or [attr.x], then I believe [x]="..." always indicates an input property databinding. It gets a bit tricky because if the input property is defined on a directive/component that uses an attribute selector and it has the same name (x), then it is a shorthand for: x [x]="...". (I don't like the shorthand syntax, but I can't say I like the longhand syntax much, which does work, FYI.)

In other words, when Angular sees/parses [x]="..." it checks to see if

there is a directive/component with the name x available to the current view
it uses an attribute selector of '[x]'
I assume it also checks to see if it has an input property with the name x too

If the above are true, then it uses the directive/component.
If the above is not true, then it looks to see if the element has a property with the name x. If it doesn't we get that familiar Can't bind to 'x' since it isn't a known native property error.

The fact that Angular does the 2 (or 3) step checking means that the syntax is ambiguous, hence we have to mentally perform the same steps to determine what is really happening. And this, my friends, is why I don't like it.

Angular2 component one-way binding or input?

2 Answers2

Linked