What
is Async Pipe?
Angular 2 provides us special kinds of pipe that
is called Async pipe and the Async pipe subscribes to an Observable or Promise
and returns the latest value it has emitted.
The Async pipe allows us to bind our templates
directly to values that arrive asynchronously manner and this is the great ability
for the promises and observables.
Example
for AsyncPipe with Promise using NgFor,
@Component({
selector: 'app-promise',
template: '<ul> < li * ngFor="let user of users |
async"> Id: {{user.id }}, Name:
{{user.name }} </li>< /ul>'
})
export class PromiseComponent {
//USERS DECLARATIONS.
users = [];
//FETCHING JSON DATA FROM REST APIS
userRestApiUrl: string = 'https://api.github.com/users/hadley/orgs';
//HOME COMPONENT CONSTRUCTOR
constructor(private userService: UserService) { }
//GET USERS SERVICE ON PAGE LOAD.
ngOnInit() {
this.userService.getUsers(this.userRestApiUrl).subscribe(data
=> this.users = data);
}
}
I hope you are enjoying with this post! Please share with you friends. Thank you!!