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>\n<li>Specify the <code>colspan</code> attribute by using the following syntax: <code>[attr.colspan]</code>.</li>\n<li>Set <code>[attr.colspan]</code> equal to an expression.</li>\n</ol>\n<p>In the following example, we bind the <code>colspan</code> attribute to the expression <code>1 + 1</code>.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"colspan\" header=\"src/app/app.component.html\">\n<!-- expression calculates colspan=2 -->\n<tr><td [attr.colspan]=\"1 + 1\">One-Two</td></tr>\n\n</code-example>\n<p>This binding causes the <code><tr></code> to span two columns.</p>\n<div class=\"alert is-helpful\">\n<p>Sometimes there are differences between the name of property and an attribute.</p>\n<p><code>colspan</code> is an attribute of <code><tr></code>, while <code>colSpan</code> with a capital \"S\" is a property.\nWhen using attribute binding, use <code>colspan</code> with a lowercase \"s\".\nFor more information on how to bind to the <code>colSpan</code> property, see the <a href=\"guide/property-binding#colspan\"><code>colspan</code> and <code>colSpan</code></a> section of <a href=\"guide/property-binding\">Property Binding</a>.</p>\n</div>\n<a id=\"class-binding\"></a>\n<h2 id=\"binding-to-the-class-attribute\">Binding to the <code>class</code> attribute<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-the-class-attribute\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can use class binding to add and remove CSS class names from an element's <code>class</code> attribute.</p>\n<h3 id=\"binding-to-a-single-css-class\">Binding to a single CSS <code>class</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-a-single-css-class\"><i class=\"material-icons\">link</i></a></h3>\n<p>To create a single class binding, use the prefix <code>class</code> followed by a dot and the name of the CSS class—for example, <code>[class.sale]=\"onSale\"</code>.\nAngular adds the class when the bound expression, <code>onSale</code> is truthy, and it removes the class when the expression is falsy—with the exception of <code>undefined</code>.\nSee <a href=\"guide/style-precedence#styling-delegation\">styling delegation</a> for more information.</p>\n<h3 id=\"binding-to-multiple-css-classes\">Binding to multiple CSS classes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-multiple-css-classes\"><i class=\"material-icons\">link</i></a></h3>\n<p>To bind to multiple classes, use <code>[class]</code> set to an expression—for example, <code>[class]=\"classExpression\"</code>.\nThe expression can be one of:</p>\n<ul>\n<li>A space-delimited string of class names.</li>\n<li>An object with class names as the keys and truthy or falsy expressions as the values.</li>\n<li>An array of class names.</li>\n</ul>\n<p>With the object format, Angular adds a class only if its associated value is truthy.</p>\n<div class=\"alert is-important\">\n<p>With any object-like expression—such as <code>object</code>, <code>Array</code>, <code>Map</code>, or <code>Set</code>—the identity of the object must change for Angular to update the class list.\nUpdating the property without changing object identity has no effect.</p>\n</div>\n<p>If there are multiple bindings to the same class name, Angular uses <a href=\"guide/style-precedence\">styling precedence</a> to determine which binding to use.</p>\n<p>The following table summarizes class binding syntax.</p>\n<style>\n td, th {vertical-align: top}\n</style>\n<table width=\"100%\">\n <colgroup><col width=\"15%\">\n \n <col width=\"20%\">\n \n <col width=\"35%\">\n \n <col width=\"30%\">\n \n </colgroup><tbody><tr>\n <th>\n Binding Type\n </th>\n <th>\n Syntax\n </th>\n <th>\n Input Type\n </th>\n <th>\n Example Input Values\n </th>\n </tr>\n <tr>\n <td>Single class binding</td>\n <td><code>[class.sale]=\"onSale\"</code></td>\n <td><code>boolean | undefined | null</code></td>\n <td><code>true</code>, <code>false</code></td>\n </tr>\n <tr>\n <td rowspan=\"3\">Multi-class binding</td>\n <td rowspan=\"3\"><code>[class]=\"classExpression\"</code></td>\n <td><code>string</code></td>\n <td><code>\"my-class-1 my-class-2 my-class-3\"</code></td>\n </tr>\n <tr>\n <td><code>Record<string, boolean | undefined | null></code></td>\n <td><code>{foo: true, bar: false}</code></td>\n </tr>\n <tr>\n <td><code>Array</code><<code>string</code>></td>\n <td><code>['foo', 'bar']</code></td>\n </tr>\n</tbody></table>\n<a id=\"style-binding\"></a>\n<h2 id=\"binding-to-the-style-attribute\">Binding to the style attribute<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-the-style-attribute\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can use style binding to set styles dynamically.</p>\n<h3 id=\"binding-to-a-single-style\">Binding to a single style<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-a-single-style\"><i class=\"material-icons\">link</i></a></h3>\n<p>To create a single style binding, use the prefix <code><a href=\"api/animations/style\" class=\"code-anchor\">style</a></code> followed by a dot and the name of the CSS style property—for example, <code>[style.width]=\"width\"</code>.\nAngular sets the property to the value of the bound expression, which is usually a string.\nOptionally, you can add a unit extension like <code>em</code> or <code>%</code>, which requires a number type.</p>\n<div class=\"alert is-helpful\">\n<p>You can write a style property name in either <a href=\"guide/glossary#dash-case\">dash-case</a>, or\n<a href=\"guide/glossary#camelcase\">camelCase</a>.</p>\n<code-example language=\"html\">\n <nav [style.background-color]=\"expression\"></nav>\n\n <nav [style.backgroundColor]=\"expression\"></nav>\n</code-example>\n</div>\n<h3 id=\"binding-to-multiple-styles\">Binding to multiple styles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#binding-to-multiple-styles\"><i class=\"material-icons\">link</i></a></h3>\n<p>To toggle multiple styles, bind to the <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> attribute—for example, <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\"</code>.\nThe <code>styleExpression</code> can be one of:</p>\n<ul>\n<li>A string list of styles such as <code>\"width: 100px; height: 100px; background-color: cornflowerblue;\"</code>.</li>\n<li>An object with style names as the keys and style values as the values, such as <code>{width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}</code>.</li>\n</ul>\n<p>Note that binding an array to <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> is not supported.</p>\n<div class=\"alert is-important\">\n<p>When binding <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> to an object expression, the identity of the object must change for Angular to update the class list.\nUpdating the property without changing object identity has no effect.</p>\n</div>\n<h4 id=\"single-and-multiple-style-binding-example\">Single and multiple-style binding example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#single-and-multiple-style-binding-example\"><i class=\"material-icons\">link</i></a></h4>\n<code-example path=\"attribute-binding/src/app/single-and-multiple-style-binding.component.ts\" header=\"nav-bar.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-nav-bar',\n template: `\n<nav [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]='navStyle'>\n <a [style.text-decoration]=\"activeLinkStyle\">Home Page</a>\n <a [style.text-decoration]=\"linkStyle\">Login</a>\n</nav>`\n})\nexport class NavBarComponent {\n navStyle = 'font-size: 1.2rem; color: cornflowerblue;';\n linkStyle = 'underline';\n activeLinkStyle = 'overline';\n /* . . . */\n}\n\n\n</code-example>\n<p>If there are multiple bindings to the same style attribute, Angular uses <a href=\"guide/style-precedence\">styling precedence</a> to determine which binding to use.</p>\n<p>The following table summarizes style binding syntax.</p>\n<style>\n td, th {vertical-align: top}\n</style>\n<table width=\"100%\">\n <colgroup><col width=\"15%\">\n \n <col width=\"20%\">\n \n <col width=\"35%\">\n \n <col width=\"30%\">\n \n </colgroup><tbody><tr>\n <th>\n Binding Type\n </th>\n <th>\n Syntax\n </th>\n <th>\n Input Type\n </th>\n <th>\n Example Input Values\n </th>\n </tr>\n <tr>\n <td>Single style binding</td>\n <td><code>[style.width]=\"width\"</code></td>\n <td><code>string | undefined | null</code></td>\n <td><code>\"100px\"</code></td>\n </tr>\n <tr>\n </tr><tr>\n <td>Single style binding with units</td>\n <td><code>[style.width.px]=\"width\"</code></td>\n <td><code>number | undefined | null</code></td>\n <td><code>100</code></td>\n </tr>\n <tr>\n <td rowspan=\"2\">Multi-style binding</td>\n <td rowspan=\"2\"><code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\"</code></td>\n <td><code>string</code></td>\n <td><code>\"width: 100px; height: 100px\"</code></td>\n </tr>\n <tr>\n <td><code>Record<string, string | undefined | null></code></td>\n <td><code>{width: '100px', height: '100px'}</code></td>\n </tr>\n</tbody></table>\n<div class=\"alert is-helpful\">\n<p>The <a href=\"guide/built-in-directives/#ngstyle\">NgStyle</a> directive can be used as an alternative to direct <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> bindings.\nHowever, using the above style binding syntax without <code><a href=\"api/common/NgStyle\" class=\"code-anchor\">NgStyle</a></code> is preferred because due to improvements in style binding in Angular, <code><a href=\"api/common/NgStyle\" class=\"code-anchor\">NgStyle</a></code> no longer provides significant value, and might eventually be removed in the future.</p>\n</div>\n<a id=\"styling-precedence\"></a>\n<h2 id=\"styling-precedence\">Styling Precedence<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#styling-precedence\"><i class=\"material-icons\">link</i></a></h2>\n<p>A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives).</p>\n<p>When there are multiple bindings to the same class name or style property, Angular uses a set of precedence rules to resolve conflicts and determine which classes or styles are ultimately applied to the element.</p>\n<div class=\"alert is-helpful\">\n<h4 id=\"styling-precedence-highest-to-lowest\">Styling precedence (highest to lowest)<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#styling-precedence-highest-to-lowest\"><i class=\"material-icons\">link</i></a></h4>\n<ol>\n<li>\n<p>Template bindings</p>\n<ol>\n<li>Property binding (for example, <code><div [class.foo]=\"hasFoo\"></code> or <code><div [style.color]=\"color\"></code>)</li>\n<li>Map binding (for example, <code><div [class]=\"classExpr\"></code> or <code><div [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpr\"></code>)</li>\n<li>Static value (for example, <code><div class=\"foo\"></code> or <code><div <a href=\"api/animations/style\" class=\"code-anchor\">style</a>=\"color: blue\"></code>)</li>\n</ol>\n</li>\n<li>\n<p>Directive host bindings</p>\n<ol>\n<li>Property binding (for example, <code>host: {'[class.foo]': 'hasFoo'}</code> or <code>host: {'[style.color]': 'color'}</code>)</li>\n<li>Map binding (for example, <code>host: {'[class]': 'classExpr'}</code> or <code>host: {'[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]': 'styleExpr'}</code>)</li>\n<li>Static value (for example, <code>host: {'class': 'foo'}</code> or <code>host: {'<a href=\"api/animations/style\" class=\"code-anchor\">style</a>': 'color: blue'}</code>)</li>\n</ol>\n</li>\n<li>\n<p>Component host bindings</p>\n<ol>\n<li>Property binding (for example, <code>host: {'[class.foo]': 'hasFoo'}</code> or <code>host: {'[style.color]': 'color'}</code>)</li>\n<li>Map binding (for example, <code>host: {'[class]': 'classExpr'}</code> or <code>host: {'[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]': 'styleExpr'}</code>)</li>\n<li>Static value (for example, <code>host: {'class': 'foo'}</code> or <code>host: {'<a href=\"api/animations/style\" class=\"code-anchor\">style</a>': 'color: blue'}</code>)</li>\n</ol>\n</li>\n</ol>\n</div>\n<p>The more specific a class or style binding is, the higher its precedence.</p>\n<p>A binding to a specific class (for example, <code>[class.foo]</code>) will take precedence over a generic <code>[class]</code> binding, and a binding to a specific style (for example, <code>[style.bar]</code>) will take precedence over a generic <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> binding.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"basic-specificity\" header=\"src/app/app.component.html\">\n<h3>Basic specificity</h3>\n\n<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`. -->\n<div [class.special]=\"isSpecial\" [class]=\"classExpression\">Some text.</div>\n\n<!-- The `style.color` binding overrides any value for the `color` property in `styleExpression`. -->\n<div [style.color]=\"color\" [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\">Some text.</div>\n\n</code-example>\n<p>Specificity rules also apply when it comes to bindings that originate from different sources.\nIt's possible for an element to have bindings in the template where it's declared, from host bindings on matched directives, and from host bindings on matched components.</p>\n<p>Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.</p>\n<p>Directive host bindings are considered less specific because directives can be used in multiple locations, so they have a lower precedence than template bindings.</p>\n<p>Directives often augment component behavior, so host bindings from components have the lowest precedence.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"source-specificity\" header=\"src/app/app.component.html\">\n<h3>Source specificity</h3>\n\n<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->\n<comp-with-host-binding [class.special]=\"isSpecial\" dirWithClassBinding>Some text.</comp-with-host-binding>\n\n<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->\n<comp-with-host-binding [style.color]=\"color\" dirWithStyleBinding>Some text.</comp-with-host-binding>\n\n</code-example>\n<p>In addition, bindings take precedence over static attributes.</p>\n<p>In the following case, <code>class</code> and <code>[class]</code> have similar specificity, but the <code>[class]</code> binding will take precedence because it is dynamic.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"dynamic-priority\" header=\"src/app/app.component.html\">\n<h3>Dynamic vs <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></h3>\n\n<!-- If `classExpression` has a value for the `special` class, this value overrides the `class=\"special\"` below -->\n<div class=\"special\" [class]=\"classExpression\">Some text.</div>\n\n<!-- If `styleExpression` has a value for the `color` property, this value overrides the `<a href=\"api/animations/style\" class=\"code-anchor\">style</a>=\"color: blue\"` below -->\n<div <a href=\"api/animations/style\" class=\"code-anchor\">style</a>=\"color: blue\" [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\">Some text.</div>\n\n\n</code-example>\n<a id=\"styling-delegation\"></a>\n<h3 id=\"delegating-to-styles-with-lower-precedence\">Delegating to styles with lower precedence<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#delegating-to-styles-with-lower-precedence\"><i class=\"material-icons\">link</i></a></h3>\n<p>It is possible for higher precedence styles to \"delegate\" to lower precedence styles using <code>undefined</code> values.\nWhereas setting a style property to <code>null</code> ensures the style is removed, setting it to <code>undefined</code> will cause Angular to fall back to the next-highest precedence binding to that style.</p>\n<p>For example, consider the following template:</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"style-delegation\" header=\"src/app/app.component.html\">\n<comp-with-host-binding dirWithHostBinding></comp-with-host-binding>\n\n</code-example>\n<p>Imagine that the <code>dirWithHostBinding</code> directive and the <code>comp-with-host-binding</code> component both have a <code>[style.width]</code> host binding.\nIn that case, if <code>dirWithHostBinding</code> sets its binding to <code>undefined</code>, the <code>width</code> property will fall back to the value of the <code>comp-with-host-binding</code> host binding.\nHowever, if <code>dirWithHostBinding</code> sets its binding to <code>null</code>, the <code>width</code> property will be removed entirely.</p>\n<h2 id=\"injecting-attribute-values\">Injecting attribute values<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-binding#injecting-attribute-values\"><i class=\"material-icons\">link</i></a></h2>\n<p>There are cases where you need to differentiate the behavior of a <a href=\"api/core/Component\">Component</a> or <a href=\"api/core/Directive\">Directive</a> based on a static value set on the host element as an HTML attribute. For example, you might have a directive that needs to know the <code>type</code> of a <code><button></code> or <code><input></code> element.</p>\n<p>The <a href=\"api/core/Attribute\">Attribute</a> parameter decorator is great for passing the value of an HTML attribute to a component/directive constructor via <a href=\"guide/dependency-injection\">dependency injection</a>.</p>\n<div class=\"alert is-helpful\">\n<p> The injected value captures the value of the specified HTML attribute at that moment.\nFuture updates to the attribute value are not reflected in the injected value.</p>\n</div>\n<code-example path=\"attribute-binding/src/app/my-input-with-attribute-decorator.component.ts\" header=\"src/app/my-input-with-attribute-decorator.component.ts\">\nimport { <a href=\"api/core/Attribute\" class=\"code-anchor\">Attribute</a>, <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-my-input-with-attribute-decorator',\n template: 'The type of the input is: {{ type }}'\n})\nexport class MyInputWithAttributeDecoratorComponent {\n constructor(@<a href=\"api/core/Attribute\" class=\"code-anchor\">Attribute</a>('type') public type: string) { }\n}\n\n\n</code-example>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"attribute-decorator\" header=\"src/app/app.component.html\">\n<app-my-input-with-attribute-decorator type=\"number\"></app-my-input-with-attribute-decorator>\n\n</code-example>\n<p>In the preceding example, the result of <code>app.component.html</code> is <strong>The type of the input is: number</strong>.</p>\n<p>Another example is the <a href=\"api/router/RouterOutlet\">RouterOutlet</a> directive, which makes use of the <a href=\"api/core/Attribute\">Attribute</a> decorator to retrieve the unique <a href=\"api/router/RouterOutlet#description\">name</a> on each outlet.</p>\n<div class=\"callout is-helpful\">\n <header>@Attribute() vs @Input()</header>\n<p> Remember, use <a href=\"api/core/Input\">@Input()</a> when you want to keep track of the attribute value and update the associated property. Use <a href=\"api/core/Attribute\">@Attribute()</a> when you want to inject the value of an HTML attribute to a component or directive constructor.</p>\n</div>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/accessibility\n - guide/ajs-quick-reference\n - guide/built-in-directives\n - guide/example-apps-list\n - guide/glossary\n - guide/router-tutorial-toh\n - guide/template-syntax\n - tutorial/toh-pt2\n-->\n<!-- links from this doc:\n - api/animations/style\n - api/common/NgStyle\n - api/core/Attribute\n - api/core/Component\n - api/core/Directive\n - api/core/Input\n - api/router/RouterOutlet\n - api/router/RouterOutlet#description\n - api/upgrade/static\n - guide/attribute-binding#attribute-class-and-style-bindings\n - guide/attribute-binding#binding-aria-attributes\n - guide/attribute-binding#binding-to-a-single-css-class\n - guide/attribute-binding#binding-to-a-single-style\n - guide/attribute-binding#binding-to-an-attribute\n - guide/attribute-binding#binding-to-colspan\n - guide/attribute-binding#binding-to-multiple-css-classes\n - guide/attribute-binding#binding-to-multiple-styles\n - guide/attribute-binding#binding-to-the-class-attribute\n - guide/attribute-binding#binding-to-the-style-attribute\n - guide/attribute-binding#delegating-to-styles-with-lower-precedence\n - guide/attribute-binding#injecting-attribute-values\n - guide/attribute-binding#single-and-multiple-style-binding-example\n - guide/attribute-binding#styling-precedence\n - guide/attribute-binding#styling-precedence-highest-to-lowest\n - guide/attribute-binding#syntax\n - guide/built-in-directives/#ngstyle\n - guide/dependency-injection\n - guide/glossary#camelcase\n - guide/glossary#dash-case\n - guide/property-binding\n - guide/property-binding#colspan\n - guide/style-precedence\n - guide/style-precedence#styling-delegation\n - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA\n - https://developer.mozilla.org/en-US/docs/Web/SVG\n - https://github.com/angular/angular/edit/master/aio/content/guide/attribute-binding.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |