Attribute binding vs property binding for Component's string @Input properties in Angular?

Question

To set string @Input() properties of the component, we can use two type of syntax:

<my-component caption="Hello there" type="primary" someThing="text value"></my-component>

OR:

<my-component [caption]="'Hello there'" [type]="'primary'" [someThing]="'text value'"></my-component>

I'm fully aware of the differences between those two types of bindings. The question is: If I have bunch of string @Input() properties that I want to set statically, can I use simple attribute binding syntax (first example) than more "meaty" property binding syntax (second example)?

What is the recommendation, and why? I.e. what are the trade-offs and is it preferable to use property-binding always, even for setting static string inputs?

Here are the few drawbacks I can think of:

• Attribute bindings are actually applied as HTML attributes, and e.g. user can see/alter them via browser's dev tools easily. Property bindings are not part of the markup.
• Attribute bindings might collide with actual HTML attribute names (unless you prefix them with data- which defeats the whole purpose of simplicity). Actual example that already bit me is title attribute.
• There is no intellisense in markup for attribute bindings with Angular Language Service.

---

But the major advantage is the simplicity. In the example above, you would agree that the first form is more elegant. In my projects it seems that big number of properties are constant (one-time-set) string properties, and the syntax makes actual difference in readability.

So... Is it a bad practice to use attribute-binding syntax for custom (non-HTML) string properties? (Given the fact that I'm aware/ok with above listed few limitations)

Answer 1

These are a couple of things I like to add:

• Attributes are just plain static fields.
  
• There is a fine line when attributes become properties.
  
• Simplicity is not the goal here, modularity and reuse-ability is.
  
• Property binding give you more control in your component and you can use a component in any like any data-driven or static scenario.
  
• One component build right with property binding can be used in 20 different projects.
  
• But if you got no such requirement then you can use attributes. They are fine.
  
• I will not say which one is better, both have their use cases but overall property bindings are lot more powerful and flexible.

And last thing I like to mention for all readers:
In front-end development any one can modify the code. We use validations just to provide a smooth user experience. Other than that any one can get the code or alter HTML if they want to, that's why we use server side validations. Angular pipe line is complex but hack-able. A user can wrap a JSON object and send it to server bypassing all our validations. So for all readers who are new front-end devs, we don't bother too much about security, we try our best to give a good user experience.