5 lines
38 KiB
JSON
5 lines
38 KiB
JSON
|
{
|
||
|
|
"id": "guide/built-in-directives",
|
||
|
|
"title": "Built-in directives",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/built-in-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=\"built-in-directives\">Built-in directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/built-in-directives#built-in-directives\"><i class=\"material-icons\">link</i></a></h1>\n<p>Directives are classes that add additional behavior to elements\nin your Angular applications.\nWith Angular's built-in directives, you can manage forms, lists, styles, and what users see.</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<p>The different types of Angular directives are as follows:</p>\n<ol>\n<li><a href=\"guide/component-overview\">Components</a>—directives with a template.\nThis type of directive is the most common directive type.</li>\n<li><a href=\"guide/built-in-directives#built-in-attribute-directives\">Attribute directives</a>—directives that change the appearance or behavior of an element, component, or another directive.</li>\n<li><a href=\"guide/built-in-directives#built-in-structural-directives\">Structural directives</a>—directives that change the DOM layout by adding and removing DOM elements.</li>\n</ol>\n<p>This guide covers built-in <a href=\"guide/built-in-directives#built-in-attribute-directives\">attribute directives</a> and <a href=\"guide/built-in-directives#built-in-structural-directives\">structural directives</a>.</p>\n<a id=\"attribute-directives\"></a>\n<h2 id=\"built-in-attribute-directives\">Built-in attribute directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/built-in-directives#built-in-attribute-directives\"><i class=\"material-icons\">link</i></a></h2>\n<p>Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components.</p>\n<p>Many NgModules such as the <a href=\"guide/router\" title=\"Routing and Navigation\"><code>RouterModule</code></a> and the <a href=\"guide/forms\" title=\"Forms\"><code>FormsModule</code></a> define their own attribute directives.\nThe most common attribute directives are as follows:</p>\n<ul>\n<li><a href=\"guide/built-in-directives#ngClass\"><code>NgClass</code></a>—adds and removes a set of CSS classes.</li>\n<li><a href=\"guide/built-in-directives#ngstyle\"><code>NgStyle</code></a>—adds and removes a set of HTML styles.</li>\n<li><a href=\"guide/built-in-directives#ngModel\"><code>NgModel</code></a>—adds two-way data binding to an HTML form element.</li>\n</ul>\n<a id=\"ngClass\"></a>\n<h2 id=\"adding-and-removing-classes-with-ngclass\">Adding and removing classes with <code><a href=\"api/common/NgClass\" class=\"code-anchor\">NgClass</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/built-in-directives#adding-and-removing-classes-with-ngclass\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can add or remove multiple CSS classes simultaneously with <code><a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a></code>.</p>\n<div class=\"alert is-helpful\">\n<p>To add or remove a <em>single</em> class, use <a href=\"guide/attribute-binding#class-binding\">class binding</a> rather than <code><a href=\"api/common/NgClass\" class=\"code-anchor\">NgClass</a></code>.</p>\n</div>\n<h3 id=\"using-ngclass-with-an-expression\">Using <code><a href=\"api/common/NgClass\" class=\"code-anchor\">NgClass</a></code> with an expression<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/built-in-directives#using-ngclass-with-an-expression\"><i class=\"material-icons\">link</i></a></h3>\n<p>On the element you'd like to style, add <code>[<a href=\"api/
|
||
|
|
}
|