@angular-eslint/template/no-negated-async

July 10, 2026 · View on GitHub


@angular-eslint/template/no-negated-async

Ensures that async pipe results, as well as values used with the async pipe, are not negated


Rationale

Angular's async pipes emit null initially, prior to the observable emitting any values, or the promise resolving. This can cause negations, like *ngIf="!(myConditional | async)" to thrash the layout and cause expensive side-effects like firing off XHR requests for a component which should not be shown.


Rule Options

The rule does not have any configuration options.


Usage Examples

The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.


❌ - Toggle examples of incorrect code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

❌ Invalid Code

{{      !(foo | async) }}
        ~~~~~~~~~~~~~~


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

❌ Invalid Code

{{ !(foo | somethingElse | async) }}
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

❌ Invalid Code

<div *ngIf="!(a | async)"></div>
            ~~~~~~~~~~~~


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

❌ Invalid Code

{{ nullable ?? !(obsVar | async) }}
               ~~~~~~~~~~~~~~~~~


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

❌ Invalid Code

<button [disabled]="!buttonDisabled$ | async">Click me!</button>
                    ~~~~~~~~~~~~~~~~~~~~~~~~


✅ - Toggle examples of correct code for this rule

Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

✅ Valid Code

{{ (foo | async) }}


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

✅ Valid Code

{{ !(foo | async | somethingElse) }}


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

✅ Valid Code

{{ (foo | async) == null }}


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

✅ Valid Code

{{ (foo | async) === false }}


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

✅ Valid Code

{{ !(foo | notAnAsyncPipe) }}


Default Config

{
  "rules": {
    "@angular-eslint/template/no-negated-async": [
      "error"
    ]
  }
}

✅ Valid Code

<div [class.mx-4]="!!(foo | async)"></div>