Angular2 Why Async pipe

Question

I understand the Async pipe works on observable and help us load thing async for data which will be coming later.

However I can work without using async too. Following is the code

Component

export class XComponent{
     someProp: string;
     someList: string[];
     someFn(){
          this.someService.subscribe(
               data=>{
                    this.someProp = data.prop; 
                    this.someList = data.list;
               }
          );
     }
}

Template

.....

<label>Prop</label>
<span>{{someProp}}</span>
<label>List</label>
<span *ngFor="let item of someList">{{item}}</span>

Above code works for me without use of async and without any issue. They why should I use async? Is it because we don't need to declare a variable for data and we can use directly observable (We anyways needs to declare a observable instead of data though)?

EDIT

Following is the code taken from angular docs for async example

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

Instead of that I can write

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time }}</div>'
})
export class AsyncObservablePipeComponent {
  time;
  constructor(){
    setInterval(() => time = new Date().toString(), 1000); 
  } 
}

To me second code looks clean too. (Even cleaner)

The async pipe is to avoid the subscriptions inside the. The behaviour of async pipe is that it'll subscribe your observer return the data into your loop variable and then unsubscribe that observer automatically. — Umar Younis
@BabarBilal The AsyncPipe does not unsubscribe until the component is destroyed. This is documented in the Angular AsyncPipe docs. — Mantas
Yeah but you dont need to manually destroy it in ngOnDestroy — Umar Younis
We don't need to manually destroy any observable which was attached to component. Angular automatically does that. — Akshay
@Akshay : That's not true. For some special cases you need to unsubscribe yourself. See this : stackoverflow.com/questions/38008334/… — Alex Beugnet

pa1 Raju pa1 Raju · Accepted Answer · 2018-04-12T09:24:16

What: With AsyncPipe we can use promises and observables directly in our template, without having to store the result on an intermediate property or variable

Why :Normally to render result of promise or observable we have to do

Wait for a callback.
Store the result of the callback is a variable.
Bind to that variable in the template.

async makes rendering data easier from promises and observables. Suppose if we use observables without async, we have to subscribe the data from observable and we need to unsubscribe that on ngdestroy hook to avoid memory leaks.but where as with async will take care of this automatically.

"The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes"

How

`@Component( 
{

selector: 'async-observ',

  template: `
 <div>
  <h5>Async demo</h5>
  <p>{{ observable | async }}</p> 
 </div>
})

class AsyncObservComponent {

    observable: Observable<number>;

    constructor() {

     this.observable = this.getObservable();

   }

  getObservable() {

    return Observable
      .interval(1000)
      .take(5)
      .map((v) => v*v)
   }

Angular2 Why Async pipe

2 Answers