Angular2-Meteor *ngIf with Meteor.userId() not updating reactively

Question

I am still pretty new to angular2-meteor and am trying a simple custom login buttons component. I want to display Sign Up and Log In buttons when there is no user logged in and display the Log Out button when a user is logged in. It seemed like it ought to be pretty simple, but it doesn't work as I am expecting.

Here is my component html:

<div *ngIf="!isLoggedIn()">
    <button class="btn btn-outline-primary btn-sm" (click)="goToLoginForm()">Log In</button>
    <button class="btn btn-success btn-sm">Sign Up</button>
</div>

<div *ngIf="isLoggedIn()">
    <button class="btn btn-outline-danger btn-sm" (click)="logout()">Log Out</button>
</div>

And here is my typescript:

import {Component} from "@angular/core";
import template from "./login-buttons.component.html";
import {Router} from "@angular/router";

@Component({
    selector: "login-buttons",
    template
})
export class LoginButtonsComponent {

    constructor(private router: Router) {}

    isLoggedIn(): boolean {
        return !!Meteor.user();
    }

    goToLoginForm(): void {
        this.router.navigateByUrl('/login');
    }

    logout(): void {
        Meteor.logout((error) => {
            if (error) {
                console.log(error);
            } else {
                this.router.navigateByUrl("/");
            }
        });
    }
}

I'm sure I am missing something really simple, but it eludes me. All help is appreciated.

Answer 1

there can be so many answer to your question. you can use user injection which is very simple. first you should use Meteor.userId();

 isLoggedIn(): boolean {
            return !!Meteor.userId();
        }

this one below is standard answer

import {Component} from "@angular/core";
import template from "./login-buttons.component.html";
import {Router} from "@angular/router";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****

@Component({
    selector: "login-buttons",
    template
})
@InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
    user: Meteor.User; //<--*** add this ***
    constructor(private router: Router) {}

    isLoggedIn(): boolean {
        return !!Meteor.user();
    }

    goToLoginForm(): void {
        this.router.navigateByUrl('/login');
    }

    logout(): void {
        Meteor.logout((error) => {
            if (error) {
                console.log(error);
            } else {
                this.router.navigateByUrl("/");
            }
        });
    }
}

and your html should be like this

<div *ngIf="!user">
    <button class="btn btn-outline-primary btn-sm" (click)="goToLoginForm()">Log In</button>
    <button class="btn btn-success btn-sm">Sign Up</button>
</div>

<div *ngIf="user">
    <button class="btn btn-outline-danger btn-sm" (click)="logout()">Log Out</button>
</div>