How to bind object of data in html page in angular2 but facing issue after reload

Your service could look something like this...

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class AuthenticationService {
  private _user_data: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  constructor() {
    this._restoreUser()
  }

  get user_data(): Observable<any> {
    return this._user_data.asObservable();
  }

  private _restoreUser(): void {
    let user: any;
    // use any code to restore user from cache and assign it to the scoped user variable
    this._user_data.next(user);
  }
}

And in your home component...

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

export class HomeComponent implements OnInit, OnDestroy {
  public userdata: any;
  private _userdataSub: Subscription;

  constructor(private authenticationService: AuthenticationService) { }

  ngOnInit() {
    this._userdataSub = this.authenticationService.user_data.subscribe((userdata) => {
      this.userdata = userdata;
    });
  }

  ngOnDestroy() {
    this._userdataSub.unsubscribe();
  }
}