Angular 2 Hide Component outside router-outlet
<p>My template looks like this </p>

<pre><code>&lt;app-progress-bar&gt;&lt;/app-progress-bar&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p>I need to hide <code>&lt;app-progress-bar&gt;&lt;/app-progress-bar&gt;</code> when user is not logged in,
I am using Guards to check if user is logged in, so when user is not logged in progress bar should be hidden.</p>

<pre><code> {
        path: 'login',
        component: LoginComponent,

    }
</code></pre>

<p>This route should hide <code>&lt;app-progress-bar&gt;&lt;/app-progress-bar&gt;</code>which is <code>ProgressBarComponent</code> </p>