5 lines
29 KiB
JSON
5 lines
29 KiB
JSON
|
{
|
||
|
|
"id": "guide/structural-directives",
|
||
|
|
"title": "Writing structural directives",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/structural-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=\"writing-structural-directives\">Writing structural directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/structural-directives#writing-structural-directives\"><i class=\"material-icons\">link</i></a></h1>\n<p>This topic demonstrates how to create a structural directive and provides conceptual information on how directives work, how Angular interprets shorthand, and how to add template guard properties to catch template type errors.</p>\n<div class=\"alert is-helpful\">\n<p>For the example app that this page describes, see the <live-example></live-example>.</p>\n</div>\n<p>For more information on Angular's built-in structural directives, such as <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code>, <code>NgFor</code>, and <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">NgSwitch</a></code>, see <a href=\"guide/built-in-directives\">Built-in directives</a>.</p>\n<a id=\"unless\"></a>\n<h2 id=\"creating-a-structural-directive\">Creating a structural directive<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/structural-directives#creating-a-structural-directive\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section guides you through creating an <code>UnlessDirective</code> and how to set <code>condition</code> values.\nThe <code>UnlessDirective</code> does the opposite of <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code>, and <code>condition</code> values can be set to <code>true</code> or <code>false</code>.\n<code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code> displays the template content when the condition is <code>true</code>.\n<code>UnlessDirective</code> displays the content when the condition is <code>false</code>.</p>\n<p>Following is the <code>UnlessDirective</code> selector, <code>appUnless</code>, applied to the paragraph element.\nWhen <code>condition</code> is <code>true</code>, the browser displays the sentence.</p>\n<code-example path=\"structural-directives/src/app/app.component.html\" header=\"src/app/app.component.html (appUnless-1)\" region=\"appUnless-1\">\n<p *appUnless=\"condition\">Show this sentence unless the condition is true.</p>\n\n</code-example>\n<ol>\n<li>\n<p>Using the Angular CLI, run the following command, where <code>unless</code> is the name of the directive:</p>\n<code-example language=\"bash\">\nng generate directive unless\n</code-example>\n<p>Angular creates the directive class and specifies the CSS selector, <code>appUnless</code>, that identifies the directive in a template.</p>\n</li>\n<li>\n<p>Import <code><a href=\"api/core/Input\" class=\"code-anchor\">Input</a></code>, <code><a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a></code>, and <code><a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a></code>.</p>\n<code-example path=\"structural-directives/src/app/unless.directive.ts\" header=\"src/app/unless.directive.ts (skeleton)\" region=\"skeleton\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>, <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a>, <a href=\"api/core/ViewContainerRef\" class=\"code-anchor\">ViewContainerRef</a> } from '@angular/core';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({ selector: '[appUnless]'})\nexport class UnlessDirective {\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Inject <code><a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a></code> and <code><a href=\"api/core/ViewContainerRef\" class=\"code-anch
|
||
|
|
}
|