Hello,
Many discussions here a related to the use of async data in Angular, so let
me recall the basics.
Angular is natively designed to handle the async processes, because nearly
everthing is async in javascript (loading, events, ...). To intend so
Angular simply use the elvis operator "*?.*".
Here is an example of a component that retrieve async data and displays it :
*1) The typescriptof the component *(a timeout has been setup to simulate
an async feed of the customer data)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mycomponent',
templateUrl: './mycomponent.component.html',
styleUrls: ['./mycomponent.component.css']
})
export class MycomponentComponent implements OnInit {
customer: any;
constructor() { }
ngOnInit() {
//Feed the customer variable asynchronously
setTimeout(()=> {
this.customer = {
name: 'Bob',
age: 25
}
}, 2000);
}
}
*2) The HTML template of the component*
<ul>
<li>Name : {{customer?.name}}</li>
<li>Age : {{customer?.age}}</li>
</ul>
This is as simple as this.
As you see there is no need for a "*| async*" in the template of the
component, there is neither any need for a direct use of rxjs observables.
I hope this can help.
Cheers
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/527700a2-a8aa-4e33-af8b-5e6b21865277%40googlegroups.com.
