angularjsangularjs-componentsangularjs-bindings

Angular Components: What is the difference between one-way and attribute bindings?


I've been building a few angular components and was wondering what are the practical difference between the one-way ("<") and attribute ("@") bindings?

Are there scenarios where one is preferable over the other? It is simple that attributes are always immutable strings and must be interpolated?


Solution

  • From https://docs.angularjs.org/guide/component:

    @ bindings can be used when the input is a string, especially when the value of the binding doesn't change.

    From https://docs.angularjs.org/api/ng/service/$compile#-scope-

    "@" - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings.

    "<" - set up a one-way (one-directional) binding between a local scope property and an expression passed via the attribute

    So, use '@' for passing string values. The value could be a simple string value, e.g. myattr="hello", or it could be an AngularJS interpolated string with embedded expressions, e.g. myattr="my_{{helloText}}".