Unused @let declaration

This diagnostic detects @let declarations whose value is never read in the template.

import {Component} from '@angular/core';

@Component({
  template: `
    @let fullName = user.firstName + ' ' + user.lastName;
    <h1>Welcome</h1>
  `,
})
class MyComponent {
  user = {firstName: 'Ada', lastName: 'Lovelace'};
}

What's wrong with that?

An unused @let is usually left over from a refactor, or points to a place where the value was meant to be used. Angular still evaluates the expression of an unused @let each time the template updates. For example, a function call in the expression still runs.

What should I do instead?

Either use the declaration or remove it:

@Component({
  template: `
    @let fullName = user.firstName + ' ' + user.lastName;
    <h1>Welcome, {{ fullName }}</h1>
  `,
})
class MyComponent {
  user = {firstName: 'Ada', lastName: 'Lovelace'};
}

@Component({
  template: `<h1>Welcome</h1>`,
})
class MyComponent {}

What if I can't avoid this?

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

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

See extended diagnostic configuration for more info.