Using Observable to hide Navbar in Angular 2
<p>My problem is the following:</p>

<p>I got a navbar in my <code>app.component</code> and i want to hide that for example befor someone logged in by simply setting a boolean variable to true with <code>ngIf</code>.</p>

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

<pre><code>&lt;navbar *ngIf="_userLoggedIn === true" &gt;&lt;/navbar&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p>After searching through web and reading through tons of questions here i think this should be done with Observables. But i cant figure out how to use them in a good way.
My idea was to use an Observable in a global service to share a variable so a <code>child component</code> can access and edit that variable and the <code>app.component</code> can subscribe to that variable to change <code>_userLoggedIn</code> to true (initial false) if that observable is set to true.</p>

<p>I using my <code>login.component</code> with the angular2 router so its displayed in the <code>&lt;router-outlet&gt;</code></p>

<pre><code>{
        path: '/login',
        name: 'Login',
        component: LoginComponent,
        useAsDefault: true
    },
</code></pre>

<p>In that component i want to set that variable to true after successed login. 
So it changes in <code>app.component</code> and the Navbar is shown.
If you need any further code just tell me.</p>

<p>Would be great if someone of you can help me with my problem or got an alternative solution for my problem.</p>