Clever Geek Handbook

Attribute binding vs property binding for component string @ Introductory properties in Angular?

To set properties @Input()

for the string component, we can use two types 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 am fully aware of the differences between these two types of bindings. Question: If I have a set of @Input () string properties that I want to set statically, can I use a simpler attribute binding syntax (first example) than the fleshy property binding syntax (second example)?

What is the recommendation and why? That is, what are the tradeoffs and is it preferable to use property binding always, even for setting static input strings?

Here are a few disadvantages that I can think of:

  • Attribute binding is actually applied as HTML attributes and for example the user can easily view / modify them using the browser dev tools. Property bindings are not part of the markup.
  • Attribute binding can clash with actual HTML attribute names (unless you prefix them with data-

    which defeats the entire goal of simplicity). Actual example: already a bit of me is an attribute title

    .
  • There is no intellisense in the markup for attribute bindings with Angular Language Service.

But the main advantage is simplicity. In the above example, you will agree that the first form is more elegant. In my projects, it seems like a lot of properties are persistent (one-off) string properties, and the syntax makes a real difference in readability.

So ... is it wrong to use attribute binding syntax for custom (non-HTML) string properties? (Considering the fact that I know / well with the above restrictions)

+3


source to share


1 answer


Here are a few things I would like to add:

  • Attributes

    simple static fields

    .
  • There is a thin line when it Attributes

    becomes properties

    .
  • Simplicity is not the goal here, modularity

    and reuse-ability

    .
  • Property binding

    gives you more control in component

    , and you can use component

    in any, as in any scenario data-driven

    or static

    .
  • One component

    build right using Property binding

    can be used in 20 different projects.
  • But if you don't have such a requirement, you can use Attributes

    . They are allright.
  • I won't say which one is better, both have their own use cases, but in general are property bindings

    much more powerful and flexible.


One last thing I would like to mention for all readers:
In front-end development, anyone can change the code. We use validations to ensure a smooth user experience. In addition, anyone can get the code or change the HTML if they want, so we use server side validation. Angular's pipeline is tricky but hack-able. The user can wrap a JSON object and send it to the server bypassing all our checks. So for all the readers who are new frontend devs, we don’t worry too much about security, we try to give a good user experience.

0


source






More articles:


All Articles