Scribd
Upload
14 views3 pages

Async Pipes

The async pipe in Angular automatically subscribes to Observables and Promises and updates the view when data is emitted or resolved. It provides five examples: 1) Displaying data from an Observable, 2) Handling HTTP requests by subscribing to an Observable, 3) Displaying data from a Promise, 4) Conditionally displaying data using ngIf, 5) Chaining async operations by transforming data from one Observable to another. The async pipe simplifies working with asynchronous data in templates.

Uploaded by

Durga Prasad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views3 pages

Async Pipes

The async pipe in Angular automatically subscribes to Observables and Promises and updates the view when data is emitted or resolved. It provides five examples: 1) Displaying data from an Observable, 2) Handling HTTP requests by subscribing to an Observable, 3) Displaying data from a Promise, 4) Conditionally displaying data using ngIf, 5) Chaining async operations by transforming data from one Observable to another. The async pipe simplifies working with asynchronous data in templates.

Uploaded by

Durga Prasad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Certainly!

The async pipe in Angular is used to automatically subscribe to an


Observable or Promise and update the view when the data is emitted or resolved.
Here are five examples of using the async pipe with some notes:

Example 1: Displaying Observable Data

// Component
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
selector: 'app-example',
template: `
<h2>Data from Observable:</h2>
<p>{{ data$ | async }}</p>
`,
})
export class ExampleComponent implements OnInit {
data$: Observable<string>;

ngOnInit() {
this.data$ = of('Hello, Angular!');
}
}
Notes:

The data$ is an Observable<string>.


The async pipe subscribes to data$ and updates the view when data is emitted.
Example 2: Handling HTTP Requests

// Component
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
selector: 'app-example',
template: `
<h2>Data from API:</h2>
<ul>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
</ul>
`,
})
export class ExampleComponent {
items$: Observable<any>;

constructor(private http: HttpClient) {


this.items$ =
this.http.get<any[]>('https://jsonplaceholder.typicode.com/todos');
}
}
Notes:

The items$ is an Observable<any[]> fetching data from an API using HttpClient.


The async pipe automatically subscribes to items$ and updates the view.
Example 3: Handling Promise Data

// Component
import { Component } from '@angular/core';

@Component({
selector: 'app-example',
template: `
<h2>Data from Promise:</h2>
<p>{{ result$ | async }}</p>
`,
})
export class ExampleComponent {
result$: Promise<string>;

constructor() {
this.result$ = this.getData();
}

getData(): Promise<string> {
return new Promise(resolve => {
setTimeout(() => resolve('Async Pipe Example'), 2000);
});
}
}
Notes:

The result$ is a Promise<string> resolving after a delay.


The async pipe automatically subscribes to result$ and updates the view.
Example 4: Using the Async Pipe with NgIf

// Component
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
selector: 'app-example',
template: `
<h2>Show Data Conditionally:</h2>
<div *ngIf="data$ | async; else loading">
{{ data$ | async }}
</div>
<ng-template #loading>Loading...</ng-template>
`,
})
export class ExampleComponent {
data$: Observable<string>;

constructor() {
this.data$ = of('Conditionally Shown Data');
}
}
Notes:

The ngIf directive is used with the async pipe to conditionally show data or a
loading message.
Example 5: Chaining Async Operations

// Component
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay, map } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
<h2>Chaining Async Operations:</h2>
<p>{{ transformedData$ | async }}</p>
`,
})
export class ExampleComponent {
originalData$: Observable<number[]>;
transformedData$: Observable<string>;

constructor() {
this.originalData$ = of([1, 2, 3]).pipe(delay(1000));
this.transformedData$ = this.originalData$.pipe(
delay(1000),
map(data => data.map(item => item * 2).join(', '))
);
}
}
Notes:

originalData$ is an Observable<number[]> with a delay.


transformedData$ uses the async pipe to display transformed data after another
delay.
These examples showcase various use cases of the async pipe, including handling
observables, promises, HTTP requests, conditional rendering, and chaining async
operations. The async pipe simplifies the subscription and handling of asynchronous
data in Angular templates.

You might also like