5 lines
18 KiB
JSON
5 lines
18 KiB
JSON
|
{
|
||
|
|
"id": "guide/attribute-directives",
|
||
|
|
"title": "Attribute directives",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/attribute-directives.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-directives\">Attribute directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-directives#attribute-directives\"><i class=\"material-icons\">link</i></a></h1>\n<p>With attribute directives, you can change the appearance or behavior of DOM elements and Angular components.</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=\"building-an-attribute-directive\">Building an attribute directive<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/attribute-directives#building-an-attribute-directive\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section walks you through creating a highlight directive that sets the background color of the host element to yellow.</p>\n<ol>\n<li>\n<p>To create a directive, use the CLI command <a href=\"cli/generate\"><code>ng generate directive</code></a>.</p>\n <code-example language=\"sh\" class=\"code-shell\">\nng generate directive highlight\n</code-example>\n<p> The CLI creates <code>src/app/highlight.directive.ts</code>, a corresponding test file <code>src/app/highlight.directive.spec.ts</code>, and declares the directive class in the <code>AppModule</code>.</p>\n<p> The CLI generates the default <code>src/app/highlight.directive.ts</code> as follows:</p>\n<p> <code-example path=\"attribute-directives/src/app/highlight.directive.0.ts\" header=\"src/app/highlight.directive.ts\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a> } from '@angular/core';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({\n selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n constructor() { }\n}\n\n\n</code-example></p>\n<p> The <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()</code> decorator's configuration property specifies the directive's CSS attribute selector, <code>[appHighlight]</code>.</p>\n</li>\n<li>\n<p>Import <code><a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a></code> from <code>@angular/core</code>.\n<code><a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a></code> grants direct access to the host DOM element through its <code>nativeElement</code> property.</p>\n</li>\n<li>\n<p>Add <code><a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a></code> in the directive's <code>constructor()</code> to <a href=\"guide/dependency-injection\">inject</a> a reference to the host DOM element, the element to which you apply <code>appHighlight</code>.</p>\n</li>\n<li>\n<p>Add logic to the <code>HighlightDirective</code> class that sets the background to yellow.</p>\n<code-example path=\"attribute-directives/src/app/highlight.directive.1.ts\" header=\"src/app/highlight.directive.ts\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a> } from '@angular/core';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({\n selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n constructor(el: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>) {\n el.nativeElement.style.backgroundColor = 'yellow';\n }\n}\n\n\n</code-example>\n</li>\n</ol>\n<div class=\"alert is-helpful\">\n<p> Directives <em>do not</em> support namespaces.</p>\n<p> <code-example path=\"attribute-directives/src/app/app.component.avoid.html\" header=\"src/app/app.component.avoid.html (unsupported)\" region=\"unsupported\">\n<p app:Highlight>This is i
|
||
|
|
}
|