How to type an observable using an async pipe within Angular

Question

I am trying to type an observable that utilizes the async pipe. Right now I am currently getting the error:

Property 'meatCount' does not exist on type 'unknown'.

<ng-template let-wowzers>
  <my-component
    class="my-component-class"
    [myProp]="(wowzers.testObservable$ | async)?.meatCount"
  >
  </my-component>
</ng-template>

The async pipe returns an object of type: Store

class Store {
   meatCount: number;
}

I know that there is a workaround where we would simply do something like:

<ng-template let-wowzers>
  <my-component
    class="my-component-class"
    [myProp]="getTypeStore(wowzers.testObservable$ | async)?.meatCount"
  >
  </my-component>
</ng-template>

Where the getTypeStore would return something like so:

  public getTypeStore = (store: Store): Store => store;

But is there another way to more effectively handle this problem? I am a little lost on how to type the observable using the async pipe within the html page within Angular?

[myProp]="getTypeStore(wowzers.testObservable$ | async)?.meatCount" is not a good idea. See here: medium.com/showpad-engineering/… — Barremian
– Barremian, Commented Sep 21, 2022 at 9:46

Nabel · Accepted Answer · 2022-09-21 17:18:42Z

1

Have you tried giving a type to your observable in the component

wowzeers: {testObservable$: Observable<Store>} | undefined;

answered Sep 21, 2022 at 17:18

Nabel

1,95617 silver badges24 bronze badges

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

2 Comments

Michael Gee Over a year ago

How can you do that for a template variable?

Nabel Over a year ago

I would look at how to type it in the component somehow by going back to the original thing you are casting the variable from. Angular will infer from that. Otherwise, you would have to do something out of the box like type pipe stackoverflow.com/a/66154034/8698374

Collectives™ on Stack Overflow

How to type an observable using an async pipe within Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related