How to handle multiple conditions with @If using new v17 syntax and async pipe

Question

I'm trying to use the the new angular syntax for the old *ngIf. In my template I would like to combine the following to @if statements

@if(foo.bar$ | async;as bar) {
     <h2>{{bar}}</h2>
}

and

@if((foo.bar$ | async) !== 'yolo') {
    
}

Those work. Ideally I would like to combine them, something like

@if(foo.bar$ | async;as bar !== 'yolo') {
    <h2>{{bar}}</h2>
}

or

@if((foo.bar$ | async;as bar) && bar !== 'yolo') {
    <h2>{{bar}}</h2>
}

I can try more, but the point is, this is incorrect syntax. So my question is, is something like this possible or should I just have 2 @if statements?

Perhaps this post can help you. It's related to the old syntax, but I think it still applies to the new syntax stackoverflow.com/questions/49296784/… — Jules
– Jules, Commented Dec 12, 2023 at 14:50
Yes, that seems to work as: (foo.bar$ | async) !== 'yolo' && (foo.bar$ | async); as bar. Its using async twice, not ideal, but if this is it, this is it :) Thnx!! — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Dec 12, 2023 at 15:11

Adarsh Goyal · Accepted Answer · 2024-08-24 20:17:29Z

3

Can upgrade to v18.2 and use

@let bar = foo.bar$ | async

And use it in throughout the template without having multiple subscriptions

edited Aug 24, 2024 at 20:17

user4136999

answered Aug 24, 2024 at 18:46

Adarsh Goyal

437 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle multiple conditions with @If using new v17 syntax and async pipe

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related