5 lines
63 KiB
JSON
5 lines
63 KiB
JSON
{
|
|
"id": "api/common/NgIf",
|
|
"title": "NgIf",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/common\", \"name\": \"@angular/common\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/common/NgIf\", \"name\": \"NgIf\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/common\">@angular/common</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_if.ts?message=docs(common)%3A%20describe%20your%20change...#L10-L239\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_if.ts#L10-L239\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"ngif\">NgIf<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#ngif\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label directive\">directive</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>A structural directive that conditionally includes a template based on the value of\nan expression coerced to Boolean.\nWhen the expression evaluates to true, Angular renders the template\nprovided in a <code>then</code> clause, and when false or null,\nAngular renders the template provided in an optional <code>else</code> clause. The default\ntemplate for the <code>else</code> clause is blank.</p>\n\n <p><a href=\"api/common/NgIf#description\">See more...</a></p>\n </section>\n \n \n \n \n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#ngmodule\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n <li>\n <a href=\"api/common/CommonModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">CommonModule</code-example>\n </a>\n </li>\n \n</ul>\n\n\n \n<section class=\"selector-list\">\n <h2 id=\"selectors\">Selectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code>[<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>]</code></li>\n \n </ul>\n \n</section>\n\n\n\n \n\n<section class=\"instance-properties\">\n <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"ngIf\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\"><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></span>: T</code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>The Boolean expression to evaluate as the condition for showing a template.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"ngIfThen\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">ngIfThen</span>: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a><<a href=\"api/common/NgIfContext\" class=\"code-anchor\">NgIfContext</a><T>></code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>A template to show if the condition expression evaluates to true.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"ngIfElse\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">ngIfElse</span>: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a><<a href=\"api/common/NgIfContext\" class=\"code-anchor\">NgIfContext</a><T>></code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>A template to show if the condition expression evaluates to false.</p>\n\n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\n\n \n\n\n \n <section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>A <a href=\"guide/structural-directives#asterisk\">shorthand form</a> of the directive,\n<code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"condition\"</code>, is generally used, provided\nas an attribute of the anchor element for the inserted template.\nAngular expands this into a more explicit version, in which the anchor element\nis contained in an <code><ng-template></code> element.</p>\n<p>Simple form with shorthand syntax:</p>\n<code-example>\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"condition\">Content to render when condition is true.</div>\n</code-example>\n<p>Simple form with expanded syntax:</p>\n<code-example>\n<ng-template [<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>]=\"condition\"><div>Content to render when condition is\ntrue.</div></ng-template>\n</code-example>\n<p>Form with an \"else\" block:</p>\n<code-example>\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"condition; else elseBlock\">Content to render when condition is true.</div>\n<ng-template #elseBlock>Content to render when condition is false.</ng-template>\n</code-example>\n<p>Shorthand form with \"then\" and \"else\" blocks:</p>\n<code-example>\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"condition; then thenBlock else elseBlock\"></div>\n<ng-template #thenBlock>Content to render when condition is true.</ng-template>\n<ng-template #elseBlock>Content to render when condition is false.</ng-template>\n</code-example>\n<p>Form with storing the value locally:</p>\n<code-example>\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"condition as value; else elseBlock\">{{value}}</div>\n<ng-template #elseBlock>Content to render when value is null.</ng-template>\n</code-example>\n\n <p>The <code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> directive is most commonly used to conditionally show an inline template,\nas seen in the following example.\nThe default <code>else</code> template is blank.</p>\n<code-example path=\"common/ngIf/ts/module.ts\" region=\"NgIfSimple\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng-if-simple',\n template: `\n <button (click)=\"show = !show\">{{show ? 'hide' : 'show'}}</button>\n show = {{show}}\n <br>\n <div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"show\">Text to show</div>\n`\n})\nexport class NgIfSimple {\n show = true;\n}\n\n</code-example>\n<h3 id=\"showing-an-alternative-template-using-else\">Showing an alternative template using <code>else</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#showing-an-alternative-template-using-else\"><i class=\"material-icons\">link</i></a></h3>\n<p>To display a template when <code>expression</code> evaluates to false, use an <code>else</code> template\nbinding as shown in the following example.\nThe <code>else</code> binding points to an <code><ng-template></code> element labeled <code>#elseBlock</code>.\nThe template can be defined anywhere in the component view, but is typically placed right after\n<code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> for readability.</p>\n<code-example path=\"common/ngIf/ts/module.ts\" region=\"NgIfElse\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng-if-else',\n template: `\n <button (click)=\"show = !show\">{{show ? 'hide' : 'show'}}</button>\n show = {{show}}\n <br>\n <div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"show; else elseBlock\">Text to show</div>\n <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>\n`\n})\nexport class NgIfElse {\n show = true;\n}\n\n</code-example>\n<h3 id=\"using-an-external-then-template\">Using an external <code>then</code> template<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#using-an-external-then-template\"><i class=\"material-icons\">link</i></a></h3>\n<p>In the previous example, the then-clause template is specified inline, as the content of the\ntag that contains the <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> directive. You can also specify a template that is defined\nexternally, by referencing a labeled <code><ng-template></code> element. When you do this, you can\nchange which template to use at runtime, as shown in the following example.</p>\n<code-example path=\"common/ngIf/ts/module.ts\" region=\"NgIfThenElse\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng-if-then-else',\n template: `\n <button (click)=\"show = !show\">{{show ? 'hide' : 'show'}}</button>\n <button (click)=\"switchPrimary()\">Switch Primary</button>\n show = {{show}}\n <br>\n <div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"show; then thenBlock; else elseBlock\">this is ignored</div>\n <ng-template #primaryBlock>Primary text to show</ng-template>\n <ng-template #secondaryBlock>Secondary text to show</ng-template>\n <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>\n`\n})\nexport class NgIfThenElse implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n thenBlock: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a><any>|null = null;\n show = true;\n\n @<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('primaryBlock', {<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true}) primaryBlock: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a><any>|null = null;\n @<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>('secondaryBlock', {<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>: true}) secondaryBlock: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a><any>|null = null;\n\n switchPrimary() {\n this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;\n }\n\n ngOnInit() {\n this.thenBlock = this.primaryBlock;\n }\n}\n\n</code-example>\n<h3 id=\"storing-a-conditional-result-in-a-variable\">Storing a conditional result in a variable<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#storing-a-conditional-result-in-a-variable\"><i class=\"material-icons\">link</i></a></h3>\n<p>You might want to show a set of properties from the same object. If you are waiting\nfor asynchronous data, the object can be undefined.\nIn this case, you can use <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> and store the result of the condition in a local\nvariable as shown in the following example.</p>\n<code-example path=\"common/ngIf/ts/module.ts\" region=\"NgIfAs\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'ng-if-as',\n template: `\n <button (click)=\"nextUser()\">Next User</button>\n <br>\n <div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"userObservable | <a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a> as user; else loading\">\n Hello {{user.last}}, {{user.first}}!\n </div>\n <ng-template #loading let-user>Waiting... (user is {{user|<a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a>}})</ng-template>\n`\n})\nexport class NgIfAs {\n userObservable = new Subject<{first: string, last: string}>();\n first = ['John', 'Mike', 'Mary', 'Bob'];\n firstIndex = 0;\n last = ['Smith', 'Novotny', 'Angular'];\n lastIndex = 0;\n\n nextUser() {\n let first = this.first[this.firstIndex++];\n if (this.firstIndex >= this.first.length) this.firstIndex = 0;\n let last = this.last[this.lastIndex++];\n if (this.lastIndex >= this.last.length) this.lastIndex = 0;\n this.userObservable.next({first, last});\n }\n}\n\n</code-example>\n<p>This code uses only one <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">AsyncPipe</a></code>, so only one subscription is created.\nThe conditional statement stores the result of <code>userStream|<a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code> in the local variable <code>user</code>.\nYou can then bind the local <code>user</code> repeatedly.</p>\n<p>The conditional displays the data only if <code>userStream</code> returns a value,\nso you don't need to use the\nsafe-navigation-operator (<code>?.</code>)\nto guard against null values when accessing properties.\nYou can display an alternative template while waiting for the data.</p>\n<h3 id=\"shorthand-syntax\">Shorthand syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#shorthand-syntax\"><i class=\"material-icons\">link</i></a></h3>\n<p>The shorthand syntax <code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> expands into two separate template specifications\nfor the \"then\" and \"else\" clauses. For example, consider the following shorthand statement,\nthat is meant to show a loading page while waiting for data to be loaded.</p>\n<code-example>\n<div class=\"hero-list\" *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"heroes else loading\">\n ...\n</div>\n\n<ng-template #loading>\n <div>Loading...</div>\n</ng-template>\n</code-example>\n<p>You can see that the \"else\" clause references the <code><ng-template></code>\nwith the <code>#loading</code> label, and the template for the \"then\" clause\nis provided as the content of the anchor element.</p>\n<p>However, when Angular expands the shorthand syntax, it creates\nanother <code><ng-template></code> tag, with <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> and <code>ngIfElse</code> directives.\nThe anchor element containing the template for the \"then\" clause becomes\nthe content of this unlabeled <code><ng-template></code> tag.</p>\n<code-example>\n<ng-template [<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>]=\"heroes\" [ngIfElse]=\"loading\">\n <div class=\"hero-list\">\n ...\n </div>\n</ng-template>\n\n<ng-template #loading>\n <div>Loading...</div>\n</ng-template>\n</code-example>\n<p>The presence of the implicit template object has implications for the nesting of\nstructural directives. For more on this subject, see\n<a href=\"https://angular.io/guide/built-in-directives#one-per-element\">Structural Directives</a>.</p>\n\n </section>\n \n\n \n<section class=\"static-properties\">\n <h2 id=\"static-properties\">Static properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#static-properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"static-property\">\n <td>\n <a id=\"ngTemplateGuard_ngIf\"></a>\n <code class=\"\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">ngTemplateGuard_ngIf</span>: 'binding'</code>\n </td>\n <td>\n \n <p>Assert the correct type of the expression bound to the <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> input within the template.</p>\n\n <p>The presence of this static field is a signal to the Ivy template type check compiler that\nwhen the <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code> structural directive renders its template, the type of the expression bound\nto <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> should be narrowed in some way. For <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code>, the binding expression itself is used to\nnarrow its type, which allows the strictNullChecks feature of TypeScript to work with <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code>.</p>\n\n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n \n\n<section class=\"static-methods\">\n <h2 id=\"static-methods\">Static methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#static-methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"ngTemplateContextGuard\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"ngtemplatecontextguard\">\n ngTemplateContextGuard()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgIf#ngtemplatecontextguard\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_if.ts?message=docs(common)%3A%20describe%20your%20change...#L228-L238\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_if.ts#L228-L238\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Asserts the correct type of the context for the template that <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code> will render.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">ngTemplateContextGuard</span><T>(dir: NgIf<T>, ctx: any): ctx is NgIfContext<Exclude<T, false | 0 | '' | null | undefined>></code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>dir</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a><t></t></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>ctx</code>\n </td>\n <td class=\"param-type\"><code>any</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>ctx is <a href=\"api/common/NgIfContext\" class=\"code-anchor\">NgIfContext</a><Exclude<T, false | 0 | '' | null | undefined>></code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n <tr>\n <td class=\"description\">\n <p>The presence of this method is a signal to the Ivy template type-check compiler that the\n<code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code> structural directive renders its template with a specific context type.</p>\n\n </td>\n </tr>\n\n \n </tbody>\n</table>\n\n \n</section>\n\n \n\n \n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/animations/state\n - api/common\n - api/common/CommonModule\n - api/common/NgForOf\n - api/common/NgIfContext\n - api/core/ContentChild\n - api/core/ContentChildren\n - api/core/NgZone\n - api/core/ViewChild\n - api/core/ViewChildren\n - api/core/global\n - api/core/global/ngGetContext\n - api/forms/FormControlName\n - api/forms/FormGroupDirective\n - api/forms/FormGroupName\n - api/forms/NgModelGroup\n - guide/ajs-quick-reference\n - guide/animations\n - guide/aot-compiler\n - guide/architecture-components\n - guide/built-in-directives\n - guide/dependency-injection-in-action\n - guide/docs-style-guide\n - guide/dynamic-form\n - guide/feature-modules\n - guide/form-validation\n - guide/frequent-ngmodules\n - guide/glossary\n - guide/migration-dynamic-flag\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/router-tutorial-toh\n - guide/sharing-ngmodules\n - guide/static-query-migration\n - guide/structural-directives\n - guide/styleguide\n - guide/template-reference-variables\n - guide/template-typecheck\n - guide/testing-components-scenarios\n - guide/transition-and-triggers\n - guide/upgrade\n - guide/what-is-angular\n - presskit\n - start\n - start/start-data\n - start/start-routing\n - tutorial/toh-pt2\n - tutorial/toh-pt3\n - tutorial/toh-pt4\n - tutorial/toh-pt5\n - tutorial/toh-pt6\n-->\n<!-- links from this doc:\n - /api\n - api/common\n - api/common/AsyncPipe\n - api/common/CommonModule\n - api/common/JsonPipe\n - api/common/NgIf#description\n - api/common/NgIf#ngif\n - api/common/NgIf#ngmodule\n - api/common/NgIf#ngtemplatecontextguard\n - api/common/NgIf#properties\n - api/common/NgIf#selectors\n - api/common/NgIf#shorthand-syntax\n - api/common/NgIf#showing-an-alternative-template-using-else\n - api/common/NgIf#static-methods\n - api/common/NgIf#static-properties\n - api/common/NgIf#storing-a-conditional-result-in-a-variable\n - api/common/NgIf#using-an-external-then-template\n - api/common/NgIfContext\n - api/core/Component\n - api/core/Input\n - api/core/OnInit\n - api/core/TemplateRef\n - api/core/ViewChild\n - api/upgrade/static\n - guide/structural-directives#asterisk\n - https://angular.io/guide/built-in-directives#one-per-element\n - https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_if.ts?message=docs(common)%3A%20describe%20your%20change...#L10-L239\n - https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_if.ts?message=docs(common)%3A%20describe%20your%20change...#L228-L238\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_if.ts#L10-L239\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_if.ts#L228-L238\n-->"
|
|
} |