Labels/texts are not displayed initially on page load in an angular2 app

Question

I have an angular2 app. In my page, text or any labels do not load initially. When I select any style and uncheck that, the texts start displaying. Any idea, why is this weird thing happening? I am not sure if we can handle this through CSS or something wrong with the inclusion of files in my angular2 app. Any inputs is appreciable.

In my template file-

<div class="row">
<table>
<tr>
<td>Name</td>
<td>{{name}}</td>
</tr>
</table
</div>

In my .ts file-

ngOnInit(){
this.getStudentInfo();
}
getStudentInfo(){
this.globalObject.getFullData().subscribe(
(data)=>{

this.name= data.student.name;
});
}

In globalObject.ts-

setFullData(data){
this.completeData=data;
}
getFullData(data){
return Observable.of(this.completeData);
}

Another template file where I am using angular material design to display the content-

 <div class="wrapper">
     <md-card>
        <md-title>
        <h1>Student Information</h1>
        </md-title>
        <md-content>
        <div>
            <md-input aria-placeholder="Name" placeholder="Name" [(ngModel)] = "" #name="ngModel"></md-input>
            <span class="validation">Name is required</span>
            </div>
        </md-content>
        </md-card>
    </div>

So, in my entire app, I save the data to global object when I have to navigate from one screen to another screen and I need to use the data. In the next screen, I get the data from the global object.This is the basic flow for my app.

In both the cases, the content does not display if I land to the screens.When I inspect and check and uncheck the particular styles, it starts displaying and retaing even after page refresh. Not sure, what's happening. Has anyone faced any similar kind of issues.