Angular *ngIf variable with async pipe multiple conditions

Question

There\'s quite good doc of using *ngIf in Angular: https://angular.io/api/common/NgIf But, is that possible to have *ngIf async variable and multiple checks on that? Something l

Answer 1

I see everyone using *ngFor and *ngIf together in one tag and similar work-arounds, but I think that is an anti-pattern. In most regular coding languages, you don't do an if statement and a for loop on the same line do you? IMHO if you have to work around because they specifically don't want you to, you're not supposed to do that. Don't practice what's not "best practice."

✅✅✅ Keep it simple, if you don't need to declare the $implicit value from users$ | async as users:

 ... 

But if you do need to declare as user, wrap it.

---

✅ For Complex Use Case; mind you, the generated markup will not even have an HTML tag, that's the beauty of ng-templates & ng-containers!

@alsami's accepted, edited answer works because *ngFor with asterisk is a shorthand for ng-template with ngFor (no asterisk), not to mention the double async pipe