async pipe as not working within an input in Angular

Question

I'm used to use the async pipe with "as" in an Angular HTML template to avoid replicating observable subscriptions, like this:

<component *ngIf="(selected$ | async) as selected"></component>

So then I can use "selected" anywhere else in the template.

But then if I try to use it like this, in an input:

<component [param]="(selected$ | async) as selected"></component>

I get an error:

Unexpected token 'as' at column 21 in [categories$ | async as categories]

Any idea why? Thanks!

martin · Accepted Answer · 2018-01-19 09:00:51Z

10

That's correct, the as syntax is specific to *ngIf. It's not a general keyword you can use anywhere in Angular templates.

See https://angular.io/api/common/NgIf and search for NgIfAs class.

answered Jan 19, 2018 at 9:00

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

1 Comment

How do I use a async var to disable a button. Do we need to use a function?

Makla · Accepted Answer · 2018-02-26 09:52:32Z

2

As already martin says as syntax is specific to *ngIf. But you can use ng-container to get results that you want:

<ng-container *ngIf="(selected$ | async) as selected">
    <component [param]="selected"></component>
</ng-container>

answered Feb 26, 2018 at 9:52

Makla

10.6k19 gold badges81 silver badges156 bronze badges