my shareService in angular 2 send value work Properly but when i render my another components get default values

Question

I'm trying to create a application with angular 2. have an Userservice and when user signIn or singOut Im send a value to another components that say user is login or not and its worked properly i meaning data sending. my problem is Im have private property in another components with name islogin and with default value(false) that i subscribe my userService islogin...but when my components rendering default value again set. how to fix this? this is my codes:

***********************userService*********************************

@Injectable()
export class UserService {

    private static _data: any;

    isLogin$:Subject<boolean> = new Subject();
    UserInfo$:Subject<any> = new Subject();

    // Observable streams
    CheckUser = this.isLogin$.asObservable();
    userinfo = this.UserInfo$.asObservable();

    constructor(private _util: UtilService) {


    }


    public signUp(data: any) {
        return this._util.post('api/auth/register', data);
    }

    public signIn(data: any) {
        var promise = this._util.post('api/auth/login', data);
        promise.then(value => {
            if (value.status == 0) {
                UserService._data = value.result;
                this.isLogin$.next(true);
                this.UserInfo$.next(UserService._data);
            }
        });
        return promise;
    }

    public signOut() {

        var promise = this._util.post('api/auth/logout');
        promise.then(value => {
            if (value.status == 0) {
                this.reset();
                this.isLogin$.next(false);
                this.UserInfo$.next(UserService._data);

            }
        });
        return promise;

    }
}

*********************someComponent like user profle********************

export class Profile extends Ext {

    private isLogin:boolean;
    private model ;


    constructor( 
                private _router: Router,
                private _routeParams: RouteParams, 
                private _seo: SEOService,
                private _user: UserService)
    {
        super();


        this._user.CheckUser.subscribe(val =>{

            this.isLogin = val;
            console.log(this.isLogin);
            alert(val);

        });

        this._user.userinfo.subscribe(val => {

            this.model = val;
            alert(val);

        });
}
}

and this is template for this component :

<div *ngIf="isLogin | async" class="container">
   hiiiii {{model.name}}
</div>

what is my problem?!

Answer 1

The problem is that you use the async pipe on something that isn't an observable (ie isLogin ) but a boolean property.

So either you use this:

<div *ngIf="isLogin" class="container">
  hiiiii {{model.name}}
</div>

Either you update your component like this:

export class Profile extends Ext {
  private isLogin:Observable<boolean>; // <-----
  private model ;

  constructor( 
            private _router: Router,
            private _routeParams: RouteParams, 
            private _seo: SEOService,
            private _user: UserService)
  {
    super();

    this.isLogin = this._user.CheckUser; // <-----

    (...)
  }
}