Angular AsyncPipe –
Angular provide a special kind of pipe that are called AsyncPipe and the AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted.
The AsyncPipe allows you to bind your HTML templates directly to values that arrive asynchronously manner that is a great ability for the promises and observables.
The expression with Async pipe-
{{ obj_expression | async }}
OR
<ul><li *ngFor="let account of accounts | async">{{account.ACNo }}</li></ul>
The object expression can be observable, promise, null, or undefined.
The example for AsyncPipe -
@Component({
selector: 'app-async-pipe',
template:`<ul><li *ngFor="let account of accounts | async"> A/C No- {{account.ACNo }} </li></ul>`,
styleUrls: ['./async-pipe.component.css']
})
export class AsyncPipeComponent implements OnInit {
accounts = [];//accounts declarations
apiURL: string = 'https://api.github.com/anilsingh/accounts/'; //fetching json data from Rest API
//AsyncPipe Component constructor
constructor(private accountService: AccountService) { }
//Load the account list
ngOnInit() {
this.accountService.getAccount(this.apiURL)
.subscribe(data => this.accounts = data);
}
}
For more detail kindly refer this link click…
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|