ESLint Async pipes should not be negated

Question

I'm using ESLint with Angular and I don't like having extra code like (observable | async) === (false | null | undefined) instead of just (observable | async). How do I disable that rule?

E:\GitHub\skybot\angular\src\app\custom-layout\custom-layout.component.html
  6:75  error  Async pipes should not be negated. Use (observable | async) === (false | null | undefined) to check its value instead  @angular-eslint/template/no-negated-async

custom-layout.component.html

<ng-template #sidenavRef>
  <vex-sidenav [collapsed]="sidenavCollapsed$ | async"></vex-sidenav>
</ng-template>

<ng-template #toolbarRef>
  <vex-toolbar [hasShadow]="toolbarShadowEnabled$ | async" [mobileQuery]="!(isDesktop$ | async)" class="vex-toolbar">
  </vex-toolbar>
</ng-template>

<ng-template #footerRef>
  <vex-footer *ngIf="isFooterVisible$ | async" class="vex-footer"></vex-footer>
</ng-template>

<ng-template #quickPanelRef>
  <vex-quick-panel></vex-quick-panel>
</ng-template>

<vex-layout [footerRef]="footerRef" [quickPanelRef]="quickPanelRef" [sidenavRef]="sidenavRef" [toolbarRef]="toolbarRef">
</vex-layout>

<vex-config-panel-toggle (openConfig)="configPanel.open()"></vex-config-panel-toggle>

<!-- CONFIGPANEL -->
<vex-sidebar #configPanel [invisibleBackdrop]="true" position="right">
  <vex-config-panel></vex-config-panel>
</vex-sidebar>
<!-- END CONFIGPANEL -->

.eslintrc.json

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "vex",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "vex",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/no-host-metadata-property": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          {
            "accessibility": "explicit"
          }
        ],
        "arrow-parens": [
          "off",
          "always"
        ],
        "id-blacklist": "error",
        "import/order": "off",
        "max-len": "off",
        "@angular-eslint/template/no-negated-async": "off"
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

We can see from the ESLint config that you have examples of rules being disabled, and the name of the rule you want to disable is in the error, so it's not clear what the problem is. — jonrsharpe, Mar 24 '21 at 21:17
@jonrsharpe, I don't get it. What exactly line do you refer to from the config? — nop, Mar 24 '21 at 21:37
Have a look at https://eslint.org/docs/user-guide/configuring/ — jonrsharpe, Mar 24 '21 at 21:38
@jonrsharpe, `"@angular-eslint/template/no-negated-async": "off",` did nothing — nop, Mar 24 '21 at 21:52
That seems unlikely, but it's not clear where you've put it. Please [edit] the question accordingly. — jonrsharpe, Mar 24 '21 at 21:53
You've put it in the `"rules"` for `"*.ts"` files, but you're showing an error in a `"*.html"` file. — jonrsharpe, Mar 24 '21 at 21:56

Sampath · Accepted Answer · 2022-02-22T10:13:41.243

26

I think this is a very good rule and we must follow that.

Why?

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.

Doc: http://codelyzer.com/rules/templates-no-negated-async/

So you can just use like so according to your use case. i.e. for me it is just a boolean check.

(isMemberChanged$ | async) !== true

edited Feb 22 '22 at 10:13

answered Jun 14 '21 at 13:52

Sampath

63,341
64
307
441

How is !null different than null !== true ? – Aaron Ullal Feb 22 '22 at 06:35
@AaronUllal I have mentioned it for a `boolean` value. i.e. not for a `null`. – Sampath Feb 22 '22 at 10:13
1

Another solution would be to create a `| isTruthy` pipe that coerces values to truthy/falsy. – Ron Strauss May 31 '23 at 12:29

score 7 · Answer 2 · answered Apr 01 '21 at 17:13

7

add "@angular-eslint/template/no-negated-async": "off" to the html portion of the esLint rules section

answered Apr 01 '21 at 17:13

rnin068

91
1

score 4 · Answer 3 · answered May 19 '21 at 08:42

edit .eslintrc.json in root or your project (5 row from end), possible variants: off/warn/error

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "crm",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "crm",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/no-negated-async": "off"
      }
    }
  ]
}

score 0 · Answer 4 · answered Feb 27 '23 at 11:01

Sometimes we need the negated async to deal with all falsies. For example with loaders observables.

So if you want to disable this rule you should edit the html rules in the .eslintrc.json

{
  ...
  "overrrides": [
    {
      "files": [
        "*.html"
      ],
      "extends": [
         "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/no-negated-async": "off"
      }
  ]
}

ESLint Async pipes should not be negated

custom-layout.component.html

.eslintrc.json

4 Answers4

Linked