5 lines
27 KiB
JSON
5 lines
27 KiB
JSON
|
{
|
||
|
|
"id": "guide/attribute-binding",
|
||
|
|
"title": "Attribute, class, and style bindings",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/attribute-binding.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"attribute-class-and-style-bindings\">Attribute, class, and style bindings<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#attribute-class-and-style-bindings\"><i class=\"material-icons\">link</i></a></h1>\n<p>Attribute binding in Angular helps you set values for attributes directly.\nWith attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<h2 id=\"binding-to-an-attribute\">Binding to an attribute<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-an-attribute\"><i class=\"material-icons\">link</i></a></h2>\n<p>It is recommended that you set an element property with a <a href=\"guide/property-binding\">property binding</a> whenever possible.\nHowever, sometimes you don't have an element property to bind.\nIn those situations, you can use attribute binding.</p>\n<p>For example, <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA\">ARIA</a> and\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG\">SVG</a> are purely attributes.\nNeither ARIA nor SVG correspond to element properties and don't set element properties.\nIn these cases, you must use attribute binding because there are no corresponding property targets.</p>\n<h2 id=\"syntax\">Syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#syntax\"><i class=\"material-icons\">link</i></a></h2>\n<p>Attribute binding syntax resembles <a href=\"guide/property-binding\">property binding</a>, but instead of an element property between brackets, you precede the name of the attribute with the prefix <code>attr</code>, followed by a dot.\nThen, you set the attribute value with an expression that resolves to a string.</p>\n<code-example language=\"html\">\n\n <p [attr.attribute-you-are-targeting]=\"expression\"></p>\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>When the expression resolves to <code>null</code> or <code>undefined</code>, Angular removes the attribute altogether.</p>\n</div>\n<h2 id=\"binding-aria-attributes\">Binding ARIA attributes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-aria-attributes\"><i class=\"material-icons\">link</i></a></h2>\n<p>One of the primary use cases for attribute binding\nis to set ARIA attributes, as in this example:</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"attrib-binding-aria\" header=\"src/app/app.component.html\">\n<!-- create and set an aria attribute for assistive technology -->\n<button [attr.aria-label]=\"actionName\">{{actionName}} with Aria</button>\n\n</code-example>\n<a id=\"colspan\"></a>\n<h2 id=\"binding-to-colspan\">Binding to <code>colspan</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-colspan\"><i class=\"material-icons\">link</i></a></h2>\n<p>Another common use case for attribute binding is with the <code>colspan</code> attribute in tables.\nBinding to the <code>colspan</code> attribute helps you keep your tables programmatically dynamic.\nDepending on the amount of data that your application populates a table with, the number of columns that a row spans could change.</p>\n<p>To use attribute binding with the <code><td></code> attribute <code>colspan</code>:</p>\n<ol>\
|
||
|
|
}
|