Missing `let` keyword in an `*ngFor` expression

This diagnostic is emitted when an expression used in *ngFor is missing the let keyword.

      import {Component} from '@angular/core';@Component({  // The `let` keyword is missing in the `*ngFor` expression.  template: `<div *ngFor="item of items">{{ item }}</div>`,})class MyComponent {  items = [1, 2, 3];}

What's wrong with that?

A missing let is indicative of a syntax error in the *ngFor string. It also means that item will not be properly pulled into scope and {{ item }} will not resolve correctly.

What should I do instead?

Add the missing let keyword.

      import {Component} from '@angular/core';@Component({  // The `let` keyword is now present in the `*ngFor` expression,  // no diagnostic messages are emitted in this case.  template: `<div *ngFor="let item of items">{{ item }}</div>`,})class MyComponent {  items = [1, 2, 3];}

Configuration requirements

strictTemplates must be enabled for any extended diagnostic to emit. missingNgForOfLet has no additional requirements beyond strictTemplates.

What if I can't avoid this?

This diagnostic can be disabled by editing the project's tsconfig.json file:

      {  "angularCompilerOptions": {    "extendedDiagnostics": {      "checks": {        "missingNgForOfLet": "suppress"      }    }  }}

See extended diagnostic configuration for more info.