{ "id": "api/common/NgForOf", "title": "NgForOf", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

NgForOflink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

A structural directive 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.

\n\n

See more...

\n
\n \n \n \n \n
\n

See alsolink

\n \n
\n\n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
ngForOf: (U & T[]) | (U & Iterable<T>)\n 		Write-Only\n \n

The value of the iterable expression, which can be used as a\ntemplate input variable.

\n\n \n
\n \n @Input()
ngForTrackBy: TrackByFunction<T>\n 		\n \n

A function that defines how to track changes for items in the iterable.

\n\n

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.

\n

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.

\n

The function receives two inputs,\nthe iteration index and the associated node data.

\n\n
\n \n @Input()
ngForTemplate: TemplateRef<NgForOfContext<T, U>>\n 		Write-Only\n \n

A reference to the template that is stamped out for each item in the iterable.

\n\n \n

See also:

\n \n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n

The ngForOf directive is generally used in the\nshorthand form *ngFor.\nIn this form, the template to be rendered for each iteration is the content\nof an anchor element containing the directive.

\n

The following example shows the shorthand syntax with some options,\ncontained in an <li> element.

\n\n<li *ngFor=\"let item of items; index as i; trackBy: trackByFn\">...</li>\n\n

The shorthand form expands into a long form that uses the ngForOf selector\non an <ng-template> element.\nThe content of the <ng-template> element is the <li> element that held the\nshort-form directive.

\n

Here is the expanded version of the short-form example.

\n\n<ng-template ngFor let-item [ngForOf]=\"items\" let-i=\"index\" [ngForTrackBy]=\"trackByFn\">\n <li>...</li>\n</ng-template>\n\n

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.

\n

When using the shorthand syntax, Angular allows only one structural directive\non an element.\nIf you want to iterate conditionally, for example,\nput the *ngIf on a container element that wraps the *ngFor element.\nFor futher discussion, see\nStructural Directives.

\n\n

Local variableslink

\n

NgForOf provides exported values that can be aliased to local variables.\nFor example:

\n\n<li *ngFor=\"let user of users; index as i; first as isFirst\">\n {{i}}/{{users.length}}. {{user}} <span *ngIf=\"isFirst\">default</span>\n</li>\n\n

The following exported values can be aliased to local variables:

\n
    \n
  • $implicit: T: The value of the individual items in the iterable (ngForOf).
    • \n
  • ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is\nmore complex then a property access, for example when using the async pipe (userStreams | async).
    • \n
  • index: number: The index of the current item in the iterable.
    • \n
  • count: number: The length of the iterable.
    • \n
  • first: boolean: True when the item is the first item in the iterable.
    • \n
  • last: boolean: True when the item is the last item in the iterable.
    • \n
  • even: boolean: True when the item has an even index in the iterable.
    • \n
  • odd: boolean: True when the item has an odd index in the iterable.
    • \n
\n

Change propagationlink

\n

When the contents of the iterator changes, NgForOf makes the corresponding changes to the DOM:

\n
    \n
  • When an item is added, a new instance of the template is added to the DOM.
    • \n
  • When an item is removed, its template instance is removed from the DOM.
    • \n
  • When items are reordered, their respective templates are reordered in the DOM.
    • \n
\n

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 <input> 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 Transitions and Triggers.

\n

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).

\n

To avoid this expensive operation, you can customize the default tracking algorithm.\nby supplying the trackBy option to NgForOf.\ntrackBy takes a function that has two arguments: index and item.\nIf trackBy is given, Angular tracks changes by the return value of the function.

\n\n
\n \n\n \n\n \n\n
\n

Static methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n
\n
\n

\n ngTemplateContextGuard()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Asserts the correct type of the context for the template that NgForOf will render.

\n\n
\n
\n \n\n static ngTemplateContextGuard<T, U extends NgIterable<T>>(dir: NgForOf<T, U>, ctx: any): ctx is NgForOfContext<T, U>\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n dir\n NgForOf\n \n \n
\n \n ctx\n any\n \n \n
\n\n \n
Returns
\n

ctx is NgForOfContext<T, U>

\n\n \n\n\n \n\n \n
\n
\n

The presence of this method is a signal to the Ivy template type-check compiler that the\nNgForOf structural directive renders its template with a specific context type.

\n\n
\n\n \n
\n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngDoCheck()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Applies the changes when needed.

\n\n
\n
\n \n\n ngDoCheck(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n \n \n\n
\n
\n\n\n" }