Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warn on negated async pipes

See original GitHub issue

Which @angular/* package(s) are relevant/releated to the feature request?

@angular/compiler-cli

Description

Negating an async pipe in an *ngIf thrashes the layout because the pipe emits null immediately before checking the condition. This can lead cause unnecessary rendering work and trigger component events which cause XHR’s or other work to be done that shouldn’t be needed.

<div *ngIf="!(myConditional | async)">
  <!-- ... -->
</div>

http://codelyzer.com/rules/template-no-negated-async/

Proposed solution

We should consider an extended diagnostic to detect and warn the user of this anti-pattern to head-off their confusing and suggest a better alternative.

I’m not entirely sure what that alternative should be, but I imagine there’s an easily transformable way of doing this?

Alternatives considered

N/A

Issue Analytics

State:
Created 2 years ago
Reactions:24
Comments:11 (7 by maintainers)

Top GitHub Comments

2reactions

pascal-puetzcommented, Feb 11, 2022

Just out of interest: isn’t this something that ESLint can already do using the “@angular-eslint/eslint-plugin” (Rule: @angular-eslint/template/no-negated-async )?

1reaction

dario-piotrowiczcommented, Feb 13, 2022

I’m wondering, does the async pipe need to emit null before checking the condition? 🤔

Could for example a startWith-like argument be added to the pipe instead? so that the developers can put the initial value there which will be used straight away before the condition checking and also the fist emission?

That could also be a handy shorter way for the developer to start with some value instead of having to add a pipe and startWith to the existing observable 🤔

Top Results From Across the Web

ESLint Async pipes should not be negated - Stack Overflow

Angular's async pipes emit null initially, prior to the observable emitting any values, or the promise resolving. This can cause negations, ...

Rule: template-no-negated-async - codelyzer

Angular's async pipes emit null initially, prior to the observable emitting any values, or the promise resolving. This can cause negations, like *ngIf=”!(...

Angular Reactive Templates with ngIf and the Async Pipe

It turns out that there is a much better solution, where we will leverage some of the features of ngIf ! Let's have...

Javascript – Not operation with async pipes in Angular 4

$(':file').on('change', function () { var file = this.files[0]; if (file.size > 1024) { alert('max upload size is 1k'); } // Also see .name,...

Subprocesses — Python 3.11.1 documentation

import asyncio async def run(cmd): proc = await asyncio.create_subprocess_shell( cmd, stdout=asyncio.subprocess.PIPE, stderr=asyncio.subprocess.PIPE) stdout ...