title: angular2 render component before oninit
body: <p>I have following code snippets</p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  import { AuthenticationService } from "../shared/services/authentication.service";
  import { User } from "./user";
  import { UserService } from "./user.service";
  
  @Component({
      templateUrl:'./user.component.html'
  })
  export class UserComponent implements OnInit{
      user: User;
  
      constructor(
          private _userService: UserService,
          private _authService:AuthenticationService){
      }
  
      ngOnInit(){
  
          let user = this._userService.getUser();
  
          if(!user){
              this._authService.getLoggedUser().subscribe(
                  user =&gt; {
                      this.user = user;
                      this._userService.setLoggedUser(user);
                  }
              );
  
              this._userService._loggedUser$.subscribe(
                  user =&gt; {
                      this.user = user;
                  }
              )
          }else{
              this.user = user;
          }
      }
  }
  </code></pre>
  
  <p>this working fine with first route initializing(/user/profile) with <code>else</code> block.But when user <strong>refresh the browser window</strong> I made a request again to the server and get user back and render my html component( <code>if(!user)</code> block ).here is html view</p>
  
  <pre><code>&lt;form&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Profile&lt;/legend&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Name&lt;/label&gt;
                  &lt;input name="name" type="text" class="form-control" [(ngModel)]="user.name"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Mobile&lt;/label&gt;
                  &lt;input name="mobile" type="text" class="form-control" [(ngModel)]="user.mobileNumber"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;input name="password" type="password" class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Email&lt;/label&gt;
                  &lt;input name="email" type="text" class="form-control" [(ngModel)]="user.email" disabled&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And I have the AppComponent and it will do the same inside <code>onInit</code>(get user via http call if not exist).The problem is when I render my UserComponent on page refresh first before finishing the init method of userComponent it will navigate to AppComponent init method and just after that <code>user.component.html</code> will crash without user data saying <code>Cannot read property 'name' of undefined</code>.and again it will redirect to onInit of UserComponent and but at this time user html had already rendered and carshed.</p>
  
  <p>How can I fix this scenario and Is there a best way to handle a situation like this? </p>
  
  <p>Thanks in advance..   </p>