5 lines
60 KiB
JSON
5 lines
60 KiB
JSON
{
|
|
"id": "api/common/NgForOf",
|
|
"title": "NgForOf",
|
|
"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/NgForOf\", \"name\": \"NgForOf\" } }\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_for_of.ts?message=docs(common)%3A%20describe%20your%20change...#L33-L282\" 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_for_of.ts#L33-L282\" 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=\"ngforof\">NgForOf<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#ngforof\"><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 <a href=\"guide/structural-directives\">structural directive</a> that renders\na template for each item in a collection.\nThe directive is placed on an element, which becomes the parent\nof the cloned templates.</p>\n\n <p><a href=\"api/common/NgForOf#description\">See more...</a></p>\n </section>\n \n \n \n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><a href=\"guide/structural-directives\">Structural Directives</a></p>\n</li>\n </ul>\n</section>\n\n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#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/NgForOf#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code>[<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>][<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngForOf</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/NgForOf#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=\"ngForOf\"></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/NgForOf\" class=\"code-anchor\">ngForOf</a></span>: (U & T[]) | (U & Iterable<T>)</code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>The value of the iterable expression, which can be used as a\n<a href=\"guide/structural-directives#shorthand\">template input variable</a>.</p>\n\n \n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"ngForTrackBy\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">ngForTrackBy</span>: <a href=\"api/core/TrackByFunction\" class=\"code-anchor\">TrackByFunction</a><T></code>\n </td>\n <td>\n \n <p>A function that defines how to track changes for items in the iterable.</p>\n\n <p>When items are added, moved, or removed in the iterable,\nthe directive must re-render the appropriate DOM nodes.\nTo minimize churn in the DOM, only nodes that have changed\nare re-rendered.</p>\n<p>By default, the change detector assumes that\nthe object instance identifies the node in the iterable.\nWhen this function is supplied, the directive uses\nthe result of calling this function to identify the item node,\nrather than the identity of the object itself.</p>\n<p>The function receives two inputs,\nthe iteration index and the associated node data.</p>\n\n </td>\n </tr>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"ngForTemplate\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">ngForTemplate</span>: <a href=\"api/core/TemplateRef\" class=\"code-anchor\">TemplateRef</a><<a href=\"api/common/NgForOfContext\" class=\"code-anchor\">NgForOfContext</a><T, U>></code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>A reference to the template that is stamped out for each item in the iterable.</p>\n\n \n <p>See also:</p>\n <ul>\n \n <li><p><a href=\"guide/template-reference-variables\">template reference variable</a></p>\n</li>\n </ul>\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/NgForOf#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>The <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngForOf</a></code> directive is generally used in the\n<a href=\"guide/structural-directives#asterisk\">shorthand form</a> <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code>.\nIn this form, the template to be rendered for each iteration is the content\nof an anchor element containing the directive.</p>\n<p>The following example shows the shorthand syntax with some options,\ncontained in an <code><li></code> element.</p>\n<code-example>\n<li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let item of items; index as i; trackBy: trackByFn\">...</li>\n</code-example>\n<p>The shorthand form expands into a long form that uses the <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngForOf</a></code> selector\non an <code><ng-template></code> element.\nThe content of the <code><ng-template></code> element is the <code><li></code> element that held the\nshort-form directive.</p>\n<p>Here is the expanded version of the short-form example.</p>\n<code-example>\n<ng-template <a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a> let-item [<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngForOf</a>]=\"items\" let-i=\"index\" [ngForTrackBy]=\"trackByFn\">\n <li>...</li>\n</ng-template>\n</code-example>\n<p>Angular automatically expands the shorthand syntax as it compiles the template.\nThe context for each embedded view is logically merged to the current component\ncontext according to its lexical position.</p>\n<p>When using the shorthand syntax, Angular allows only <a href=\"guide/built-in-directives#one-per-element\">one structural directive\non an element</a>.\nIf you want to iterate conditionally, for example,\nput the <code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> on a container element that wraps the <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> element.\nFor futher discussion, see\n<a href=\"guide/built-in-directives#one-per-element\">Structural Directives</a>.</p>\n\n <h3 id=\"local-variables\">Local variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#local-variables\"><i class=\"material-icons\">link</i></a></h3>\n<p><code><a href=\"api/common/NgForOf\" class=\"code-anchor\">NgForOf</a></code> provides exported values that can be aliased to local variables.\nFor example:</p>\n<code-example>\n<li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let user of users; index as i; first as isFirst\">\n {{i}}/{{users.length}}. {{user}} <span *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"isFirst\">default</span>\n</li>\n</code-example>\n<p>The following exported values can be aliased to local variables:</p>\n<ul>\n<li><code>$implicit: T</code>: The value of the individual items in the iterable (<code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngForOf</a></code>).</li>\n<li><code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngForOf</a>: <a href=\"api/core/NgIterable\" class=\"code-anchor\">NgIterable</a><T></code>: The value of the iterable expression. Useful when the expression is\nmore complex then a property access, for example when using the async pipe (<code>userStreams | <a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code>).</li>\n<li><code>index: number</code>: The index of the current item in the iterable.</li>\n<li><code>count: number</code>: The length of the iterable.</li>\n<li><code>first: boolean</code>: True when the item is the first item in the iterable.</li>\n<li><code>last: boolean</code>: True when the item is the last item in the iterable.</li>\n<li><code>even: boolean</code>: True when the item has an even index in the iterable.</li>\n<li><code>odd: boolean</code>: True when the item has an odd index in the iterable.</li>\n</ul>\n<h3 id=\"change-propagation\">Change propagation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#change-propagation\"><i class=\"material-icons\">link</i></a></h3>\n<p>When the contents of the iterator changes, <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">NgForOf</a></code> makes the corresponding changes to the DOM:</p>\n<ul>\n<li>When an item is added, a new instance of the template is added to the DOM.</li>\n<li>When an item is removed, its template instance is removed from the DOM.</li>\n<li>When items are reordered, their respective templates are reordered in the DOM.</li>\n</ul>\n<p>Angular uses object identity to track insertions and deletions within the iterator and reproduce\nthose changes in the DOM. This has important implications for animations and any stateful\ncontrols that are present, such as <code><input></code> elements that accept user input. Inserted rows can\nbe animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state\nsuch as user input.\nFor more on animations, see <a href=\"guide/transition-and-triggers\">Transitions and Triggers</a>.</p>\n<p>The identities of elements in the iterator can change while the data does not.\nThis can happen, for example, if the iterator is produced from an RPC to the server, and that\nRPC is re-run. Even if the data hasn't changed, the second response produces objects with\ndifferent identities, and Angular must tear down the entire DOM and rebuild it (as if all old\nelements were deleted and all new elements inserted).</p>\n<p>To avoid this expensive operation, you can customize the default tracking algorithm.\nby supplying the <code>trackBy</code> option to <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">NgForOf</a></code>.\n<code>trackBy</code> takes a function that has two arguments: <code>index</code> and <code>item</code>.\nIf <code>trackBy</code> is given, Angular tracks changes by the return value of the function.</p>\n\n </section>\n \n\n \n\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/NgForOf#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/NgForOf#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_for_of.ts?message=docs(common)%3A%20describe%20your%20change...#L271-L281\" 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_for_of.ts#L271-L281\" 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/NgForOf\" class=\"code-anchor\">NgForOf</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, U extends NgIterable<T>>(dir: NgForOf<T, U>, ctx: any): ctx is NgForOfContext<T, U></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/NgForOf\" class=\"code-anchor\">NgForOf</a><t, u=\"\"></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/NgForOfContext\" class=\"code-anchor\">NgForOfContext</a><T, U></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/NgForOf\" class=\"code-anchor\">NgForOf</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<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"ngDoCheck\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"ngdocheck\">\n ngDoCheck()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/NgForOf#ngdocheck\"><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_for_of.ts?message=docs(common)%3A%20describe%20your%20change...#L200-L222\" 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_for_of.ts#L200-L222\" 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>Applies the changes when needed.</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\"><span class=\"member-name\">ngDoCheck</span>(): void</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-1\">Parameters</h6>\n <p>There are no parameters.</p>\n\n \n <h6 class=\"no-anchor\" id=\"returns-1\">Returns</h6>\n <p><code>void</code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n</section>\n\n \n \n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/animations/stagger\n - api/common\n - api/common/CommonModule\n - api/common/KeyValuePipe\n - api/common/NgForOfContext\n - api/common/SlicePipe\n - api/core\n - api/core/ChangeDetectorRef\n - api/core/DoCheck\n - api/core/EmbeddedViewRef\n - api/core/IterableDiffer\n - api/core/QueryList\n - api/core/TrackByFunction\n - api/core/global\n - api/core/global/ngGetContext\n - api/forms/FormArrayName\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - api/upgrade/static/downgradeComponent\n - api/upgrade/static/testing/createAngularJSTestingModule\n - api/upgrade/static/testing/createAngularTestingModule\n - guide/ajs-quick-reference\n - guide/architecture-components\n - guide/built-in-directives\n - guide/component-interaction\n - guide/component-styles\n - guide/dependency-injection-in-action\n - guide/deprecations\n - guide/docs-style-guide\n - guide/dynamic-form\n - guide/feature-modules\n - guide/forms\n - guide/frequent-ngmodules\n - guide/http\n - guide/inputs-outputs\n - guide/interpolation\n - guide/ivy-compatibility\n - guide/ivy-compatibility-examples\n - guide/lifecycle-hooks\n - guide/migration-dynamic-flag\n - guide/pipes\n - guide/reactive-forms\n - guide/router-tutorial-toh\n - guide/static-query-migration\n - guide/structural-directives\n - guide/styleguide\n - guide/template-reference-variables\n - guide/template-statements\n - guide/template-typecheck\n - guide/testing-components-scenarios\n - guide/testing-utility-apis\n - guide/transition-and-triggers\n - guide/upgrade\n - guide/user-input\n - guide/what-is-angular\n - start\n - start/start-data\n - start/start-forms\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/NgForOf#change-propagation\n - api/common/NgForOf#description\n - api/common/NgForOf#local-variables\n - api/common/NgForOf#methods\n - api/common/NgForOf#ngdocheck\n - api/common/NgForOf#ngforof\n - api/common/NgForOf#ngmodule\n - api/common/NgForOf#ngtemplatecontextguard\n - api/common/NgForOf#properties\n - api/common/NgForOf#see-also\n - api/common/NgForOf#selectors\n - api/common/NgForOf#static-methods\n - api/common/NgForOfContext\n - api/common/NgIf\n - api/core/Input\n - api/core/NgIterable\n - api/core/TemplateRef\n - api/core/TrackByFunction\n - api/upgrade/static\n - guide/built-in-directives#one-per-element\n - guide/structural-directives\n - guide/structural-directives#asterisk\n - guide/structural-directives#shorthand\n - guide/template-reference-variables\n - guide/transition-and-triggers\n - https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_for_of.ts?message=docs(common)%3A%20describe%20your%20change...#L200-L222\n - https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_for_of.ts?message=docs(common)%3A%20describe%20your%20change...#L271-L281\n - https://github.com/angular/angular/edit/master/packages/common/src/directives/ng_for_of.ts?message=docs(common)%3A%20describe%20your%20change...#L33-L282\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_for_of.ts#L200-L222\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_for_of.ts#L271-L281\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/directives/ng_for_of.ts#L33-L282\n-->"
|
|
} |