Angular 2 - Update view when variable changes

Question

I have a button on my nav bar (app.component.html) that I want to only show when the user is logged in. This is my current approach that does not work for obvious reasons explained later. I want to find out how I can modify it to work.

Inside my app.component.html, I have the following button

<button *ngIf="isCurrentUserExist">MyButton</button>

Inside my app.component.ts, I am trying to bound the variable isCurrentUserExist to a function that returns true if the user exists. I believe this is the problem because this code is only executed once at OnInit as oppose to somehow keeping the view updated

ngOnInit() {
  this.isCurrentUserExist = this.userService.isCurrentUserExist();    
}

For reference, inside my UserService.ts

export class UserService {

    private currentUser: User

    constructor(private http: Http,private angularFire: AngularFire) { }

    getCurrentUser(): User {
        return this.currentUser
    }

    setCurrentUser(user: User) {
        this.currentUser = user;
    }

    isCurrentUserExist(): boolean {
        if (this.currentUser) {
        return true
        }
        return false
    }
}

A bit more information about my app... Upon start up when the user does not exist, I have a login screen (login component). When the user logs in, it goes to firebase and grab the user information (async) and store it to my user service via

setCurrentUser(user: User)

So at this point, I like to update the button in my nav bar (which exists in app.component.html) and show the button.

What can I do to achieve this?

Tiep Phan · Accepted Answer · 2017-02-03 04:50:36Z

6

let's try this: using BehaviorSubject

UserService.ts

import { Subject, BehaviorSubject} from 'rxjs';

export class UserService {

    private currentUser: User;
    public loggedIn: Subject = new BehaviorSubject<boolean>(false);

    constructor(private http: Http,private angularFire: AngularFire) { }

    getCurrentUser(): User {
        return this.currentUser
    }

    setCurrentUser(user: User) { // this method must call when async process - grab firebase info - finished
        this.currentUser = user;
        this.loggedIn.next(true);
    }

    isCurrentUserExist(): boolean {
        if (this.currentUser) {
        return true
        }
        return false
    }
}

app.component.ts

ngOnInit() {
  this.userService.loggedIn.subscribe(response => this.isCurrentUserExist = response);    
}

answered Feb 3, 2017 at 4:50

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user172902 Over a year ago

Hi Tiep. Thanks for this. It does work very well. I was thinking along the line of event emitter before. However, I didnt like to use it unless I'm desperate because it feels like signals flying through the air waiting for someone to grab it (sort of like push notification). This BehaviorSubject does feel like some kind of event emitter as well? Do you know if there is another approach (for learning purpose)

Tiep Phan Over a year ago

you could create custom event emitter system (maybe base on observable), then when somewhere, you could subscribe to some kind of event like 'user.login' (Ionic 2 have own event system). whenever event fired, you will get value - payload - to do whatever you like.

Kishan Mundha · Accepted Answer · 2017-02-03 04:44:02Z

1

in app.component.ts you are assigned value from function once. So it will never change. To resolve this problem and to real time update use assign function instance of boolean variable this.isCurrentUserExist = this.userService.isCurrentUserExist;. And in view change change *ngIf expression as function isCurrentUserExist().

answered Feb 3, 2017 at 4:44

Kishan Mundha

3,15120 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Update view when variable changes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related