angular2 render component before oninit

Question

I have following code snippets

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 => {
                    this.user = user;
                    this._userService.setLoggedUser(user);
                }
            );

            this._userService._loggedUser$.subscribe(
                user => {
                    this.user = user;
                }
            )
        }else{
            this.user = user;
        }
    }
}

this working fine with first route initializing(/user/profile) with else block.But when user refresh the browser window I made a request again to the server and get user back and render my html component( if(!user) block ).here is html view

<form>
        <fieldset>
            <legend>Profile</legend>
            <div class="form-group">
                <label>Name</label>
                <input name="name" type="text" class="form-control" [(ngModel)]="user.name">
            </div>
            <div class="form-group">
                <label>Mobile</label>
                <input name="mobile" type="text" class="form-control" [(ngModel)]="user.mobileNumber">
            </div>
            <div class="form-group">
                <label>Password</label>
                <input name="password" type="password" class="form-control">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input name="email" type="text" class="form-control" [(ngModel)]="user.email" disabled>
            </div>
        </fieldset>
    </form>

And I have the AppComponent and it will do the same inside onInit (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 user.component.html will crash without user data saying Cannot read property 'name' of undefined .and again it will redirect to onInit of UserComponent and but at this time user html had already rendered and carshed.

How can I fix this scenario and Is there a best way to handle a situation like this?

Thanks in advance..

Answer 1

you can put your <form> inside a <div *ngIf="user">..</div> and this component is loading only once you have some values inside your user. so you will not get that error.

<div *ngIf="user">
     <form> <fieldset>
            <legend>Profile</legend>
            <div class="form-group">
                <label>Name</label>
                <input name="name" type="text" class="form-control" [(ngModel)]="user.name">
            </div>
           .............
           .............
    </form>
</div>

there is one more way you can use resolve in your route so only when your resolve is done then only user.component will start.

export const AppRoutes: Routes = [
  ...
  { 
    path: 'contact/:id',
    component: ContactsDetailComponent,
    resolve: {
      contact: 'contact'
    }
  }
];

read from here about resolve http://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

Answer 2

What about this? Show the form once user is in. <fieldset *ngIf="user">