66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
|
|
||
|
|
<h1>Attribute, class, and style bindings</h1>
|
||
|
|
<h2>Attribute binding</h2>
|
||
|
|
<!-- #docregion attrib-binding-colspan -->
|
||
|
|
<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>
|
||
|
|
-->
|
||
|
|
<!-- #docregion colSpan -->
|
||
|
|
<!-- Notice the colSpan property is camel case -->
|
||
|
|
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
|
||
|
|
<!-- #enddocregion colSpan -->
|
||
|
|
|
||
|
|
<tr><td>Five</td><td>Six</td></tr>
|
||
|
|
</table>
|
||
|
|
<!-- #enddocregion attrib-binding-colspan -->
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<!-- #docregion attrib-binding-aria -->
|
||
|
|
<!-- create and set an aria attribute for assistive technology -->
|
||
|
|
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
|
||
|
|
<!-- #enddocregion attrib-binding-aria -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h2>Class binding</h2>
|
||
|
|
|
||
|
|
<!-- #docregion is-special -->
|
||
|
|
<h3>toggle the "special" class on/off with a property:</h3>
|
||
|
|
<div [class.special]="isSpecial">The class binding is special.</div>
|
||
|
|
|
||
|
|
<h3>binding to class.special overrides the class attribute:</h3>
|
||
|
|
<div class="special" [class.special]="!isSpecial">This one is not so special.</div>
|
||
|
|
|
||
|
|
<h3>Using the bind- syntax:</h3>
|
||
|
|
<div bind-class.special="isSpecial">This class binding is special too.</div>
|
||
|
|
<!-- #enddocregion is-special -->
|
||
|
|
|
||
|
|
<!-- #docregion add-class -->
|
||
|
|
<h3>Add a class:</h3>
|
||
|
|
<div class="item clearance special" [class.item-clearance]="itemClearance">Add another class</div>
|
||
|
|
<!-- #enddocregion add-class -->
|
||
|
|
|
||
|
|
<!-- #docregion class-override -->
|
||
|
|
<h3>Overwrite all existing classes with a new class:</h3>
|
||
|
|
<div class="item clearance special" [attr.class]="resetClasses">Reset all classes at once</div>
|
||
|
|
<!-- #enddocregion class-override -->
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h2>Style binding</h2>
|
||
|
|
|
||
|
|
<!-- #docregion style-binding-->
|
||
|
|
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
|
||
|
|
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
|
||
|
|
<!-- #enddocregion style-binding -->
|
||
|
|
|
||
|
|
<!-- #docregion style-binding-condition-->
|
||
|
|
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
|
||
|
|
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
|
||
|
|
<!-- #enddocregion style-binding-condition-->
|