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": {}
    }
  ]
}

Answer 1

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. ie for me it is just a boolean check.

(isMemberChanged$ | async) !== true

Answer 2

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"
      }
    }
  ]
}

Answer 3

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