How do I get a value after pipe complete?

Question

For example. I want Angular auto update the value (using observable).

// in test.component.ts
ngOnInit(){
  let i = 0;
  this.test = new Observalble<any>((ob) => {
    setInterVal(() => {
      ob.next({
        i: i++,
      })
    },1000);
  });
}

<!-- in test.component.html -->
<p>{{ (test | async).i }}</p> <!-- not work -->
<p>{{ (test.i | async) }}</p> <!-- not work -->

Answer 1

You'll need to fix your spelling errors first: setInterVal should be setInterval (lower case v), and Observalble should be Observable.

Then, you need to add the null safe operator, as the async result of test will start out undefined, and cause errors if you try get the i property from an undefined value. By adding the ?, it will only try to read i if test | async is not null.

// in test.component.ts
ngOnInit(){
  let i = 0;
  this.test = new Observable<any>((ob) => {
    setInterval(() => {
      ob.next({
        i: i++,
      })
    },1000);
  });
}

<!-- in test.component.html -->
<p>{{ (test | async)?.i }}</p> <!-- not work -->

Here is a StackBlitz demo