I have a data service to communicate with my server.
export class DataService {
constructor(private http: Http) { }
getUsers():Observable<Users>{
return this.http.get(myurl).map(this.extractData);
}
extractData(res:Response){
return res.json();
}
}
I use it inside my component in this way.
ngOnInit() {
this.getUsers();
}
getUsers():void{
this.dataService.getUsers().subscribe(response=>{
this.users = response;
} );
}
The variable this.user is a input for a table.
When I start the component before I see the empty table and after,when the data are loaded, I see the table with all the users. How Can I view the component just when the data are ready?
When I insert a new user on my server I don't see it on my table and I need to refresh the page. How Can I show(real time) a new user on the table, after an insert, without refresh the page?
Thank you
How Can I view the component just when the data are ready?
You need to move this data retrieval logic into a Resolver and the component should get data from it.
How Can I show(real time) a new data on the table, after an insert, without refresh the page?
You should intitiate the data retrieval logic on insert inside of your component and update the reference to 'users' variable with new data.
You can always initialize this.users to null. Then in your markup you could do something like this:
<div *ngIf="users">
<!-- Your content here -->
</div>
When users becomes non-null Angular will begin rendering the div tagged with *ngIf. This works because in JS null is falsy. If that seems goofy you could always set a boolean flag in your subscription that you reference in the *ngIf block (*ngIf="myFlag").