Ionic 2 - How to manage global variables?
<p><strong>THE SITUATION</strong>:</p>

<p>In my Ionic 2 app i have a simple login which form is contained inside the right menu. You click on the right icon in the header - will appear the menu with the login form. </p>

<p>The login code is inside the app.component and the login view is app.html.
The successful login will set a boolean global variable - loginState - to true.</p>

<p>The aim is that every other component - importing the global variable - can know that login state.</p>

<p>The problem is that - after a successful login I need to see the changes immediately reflect on the homePage component and this is not the case.</p>

<p>For instance on the homepage certain content should immediately become available to you after the login.</p>

<p><strong>THE CODE</strong>:</p>

<p>This is where i set up the global variable in a separate file named <strong>global.ts</strong> that I then import in other components:</p>

<pre><code>export var global = {
    loginState : false
};
</code></pre>

<p><strong>app.component</strong>:</p>

<p>This is the app component where I import the global variable and set it to true after successful login:</p>

<pre><code>import {global} from "./global";

loginSubmit()
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password)
        .subscribe((response) =&gt; {
            if(response.result == 1) 
            {
                global.loginState = true;
                this.menu.close();
            }
        }, (error) =&gt; {
            console.log(error);
        });

}
</code></pre>

<p><strong>THE QUESTION</strong>:</p>

<p><strong>What should be the way to proceed in order to deal with changes on a global variable being immediately reflect on other components?</strong></p>

<p>Can I call a homePage component method from the app.component?</p>

<p>Thank you!</p>