Thursday, 3 May 2018

Angular - Attribute, class, and style bindings

Attribute binding:
You can set the value of an attribute directly with an attribute binding.
This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.
This guide stresses repeatedly that setting an element property with a property binding is always preferred to setting the attribute with a string. Why does Angular offer attribute binding?
You must use attribute binding when there is no element property to bind.
This fact becomes painfully obvious when you write something like this.
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
And you get this error:
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
As the message says, the <td> element does not have a colspan property. It has the "colspan" attribute, but interpolation and property binding can set only properties, not attributes.
You need attribute bindings to create and bind to such attributes.
Attribute binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix attr, followed by a dot (.) and the name of the attribute. You then set the attribute value, using an expression that resolves to a string.
Bind [attr.colspan] to a calculated value:
src/app/app.component.html
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>


Class binding:
You can add and remove CSS class names from an element's class attribute with a class binding.
Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class, optionally followed by a dot (.) and the name of a CSS class: [class.class-name].
The following examples show how to add and remove the application's "special" class with class bindings. Here's how to set the attribute without binding:
src/app/app.component.html
<!-- standard class attribute setting  -->
<div class="bad curly special">Bad curly special</div>
You can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
src/app/app.component.html
<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>
Finally, you can bind to a specific class name. Angular adds the class when the template expression evaluates to truthy. It removes the class when the expression is falsy.
src/app/app.component.html
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>
While this is a fine way to toggle a single class name, the NgClass directive is usually preferred when managing multiple class names at the same time.

Style binding:
You can set inline styles with a style binding.
Style binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix style, followed by a dot (.) and the name of a CSS style property: [style.style-property].
src/app/app.component.html
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
Some style binding styles have a unit extension. The following example conditionally sets the font size in “em” and “%” units.
src/app/app.component.html
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
Note that a style property name can be written in either dash-case, as shown above, or camelCase, such as fontSize.




No comments:

Post a Comment