JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Angular 2 Template Syntax Demystified

  • If you’ve read the step-by-step guide you’ve probably seen the following syntaxes:

    And that’s not all, in fact we could add some more:

    What we see here is Event Binding, Property Binding, Local Variables and Template Directives.

  • Property binding is the syntax where we use brackets to bind values to an element’s property.
  • Let’s say we have a controller like this:

    And a template like this:

    Angular takes the expression passed to the attribute and parses and evaluates it against the corresponding scope, which allows us to pass other values than strings to directives.

  • If we’d build our directive in Angular, we would need to bind to it’s property to assign an object value:

    Another feature that property binding brings to the table is escaping.

  • Since this is quite a lot of typing to implement such a common scenario, Angular comes with an directive that saves some key strokes for us, by unifying the property and event binding, and also the extraction of the target’s value.

Angular Template Syntax Demystified

Comments are closed, but trackbacks and pingbacks are open.