Render View Only After all Data has been fetched from Service? - web-services

Question

I have a table Component where when the user Selects a particular row he is Redirected to a different route to a team component .
I want to Load the View Of the New Route when all the data from the Service has been Fetched by the Component .
How to Prevent the View From rendering till the Time the whole data has been fetched from Service in the New components OnInit Method.
in angular 1 there was ngCloak how to do it in Angular 2 .
I have used ngIf but for a split second till the data loads the div pops up and then disappears
My table Component
onSubmit(team:any){
this.teamId = team._links.team.href.split('/').pop(-1);
this.competitionService.storeTeamCrest(team.crestURI);
this.router.navigate(['team', {id: this.teamId}]);
}
Service
storeTeamCrest(link:string){
this.teamCrest = link;
}
getPlayers(id:string){
let headers = new Headers();
headers.append('X-Auth-Token', 'XXX');
return this.http.get('https://api.football-data.org/v1/teams/'+id+'/players',{headers:headers}).map(response => response.json())
}
getFixtures(id:string){
let headers = new Headers();
headers.append('X-Auth-Token', '7c94f28bddf34648bd9a6f5c2e2da0f0');
return this.http.get('https://api.football-data.org/v1/teams/'+id+'/fixtures',{headers:headers}).map(response => response.json())
}
Team Component
ngOnInit(){
this.teamId = this.route.snapshot.params['id'];
this.teamCrest = this.competitionService.teamCrest;
this.getPlayers();
}
getPlayers(){
this.competitionService.getPlayers(this.teamId).subscribe(player => this.players = player.players);
}
Team Component Template
<div class="container">
<div class="row">
<div *ngFor="let player of players"#data>
<div class="col-md-4">
<div class="well box">
<img class="avatar" src="{{teamCrest}}">
<h4> {{player.name}} </h4>
<hr style="background-color:black;" />
<span class="label label-default"><strong>Position :</strong> {{player.position}} </span><br/>
<span class="label label-primary"><strong>Jersey Number :</strong> {{player.jerseyNumber}} </span><br/>
<span class="label label-success"><strong>Date Of birth :</strong> {{player.dateOfBirth}}</span><br/>
<span class="label label-info"><strong>Nationality :</strong> {{player.nationality}} </span><br/>
<span class="label label-warning"><strong>Contract Untill :</strong> {{player.contractUntil}}</span><br/>
<span class="label label-success"><strong>Market Value :</strong> {{player.marketValue}}</span><br/>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!players?.length">
<h3>No Player Data found For the Selected Team</h3>
</div>

Answer 1

handle the (complete) => {} callback inside subscribe (Subscribe Docs) and set a boolean to true. Check against this boolean with your *ngIf.
So, inside your Team Component:
players:any[] = [];
loadCompleted:boolean = false;
ngOnInit(){
this.teamId = this.route.snapshot.params['id'];
this.teamCrest = this.competitionService.teamCrest;
this.getPlayers();
}
getPlayers(){
this.loadCompleted = false;
this.competitionService.getPlayers(this.teamId)
.subscribe(
player => this.players = player.players,
(error) => console.error(error),
() => this.loadCompleted = true)
);
}
then in your HTML template:
<div *ngIf="loadCompleted" class="container">
<div class="row">
<div *ngFor="let player of players" #data>
<div class="col-md-4">
<div class="well box">
<img class="avatar" src="{{teamCrest}}">
<h4> {{player.name}} </h4>
<hr style="background-color:black;" />
<span class="label label-default"><strong>Position :</strong> {{player.position}} </span><br/>
<span class="label label-primary"><strong>Jersey Number :</strong> {{player.jerseyNumber}} </span><br/>
<span class="label label-success"><strong>Date Of birth :</strong> {{player.dateOfBirth}}</span><br/>
<span class="label label-info"><strong>Nationality :</strong> {{player.nationality}} </span><br/>
<span class="label label-warning"><strong>Contract Untill :</strong> {{player.contractUntil}}</span><br/>
<span class="label label-success"><strong>Market Value :</strong> {{player.marketValue}}</span><br/>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="loadCompleted && !players?.length">
<h3>No Player Data found For the Selected Team</h3>
</div>
If i understood your question, this should do what you want.
Just a side note: in your backend service, IMHO, you shouldn't return null if there aren't players for the input teamId, but an empty List/Array/whatever.