CODEWITHSUNDEEP
angularrxjs
David
David

Reputation: 3614

async pipe as not working within an input in Angular

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!

Upvotes: 9

Views: 2259

Answers (2)

Makla
Makla

Reputation: 10459

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>

Upvotes: 2

martin
martin

Reputation: 96969

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.

Upvotes: 10

Related Questions