Angular 2 - Attribute / Property Binding


// Angular 2 - Attribute / Property Binding:

To add a CSS class to the li element that the user click on, we added:

[class.selected]="hero === selectedHero"

to the li element.  Notice that in the template, the class.selected is 
surrounded in square brackets ([]). This is the syntax for a property binding, 
a binding in which data flows one way from the data source (the expression 
"hero === selectedHero") to a property of class.

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

Notice that the hero property is the target of the property binding.  It is in
square brackets to the left of the equal sign.  Angular insists that we declare 
a target property to be an input property. If we don't, Angular rejects the 
binding and throws an error.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License