title: How to pass a value to index.html from component in angular 2
body: <p>I have an angular2 project where <code>index.html</code> contains header bar. Other components will take care of logging in and displaying other stuff.</p>
  
  <p>I have to show a logo in header bar which is present in <code>index.html</code> only if the user loggedIn. I'm setting a flag in <code>app.component.ts</code> if the user logged in. How to refer that flag in <code>index.html</code>? </p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="content-body"&gt;
          &lt;header class="header"&gt;
              &lt;div class="header-bar container"&gt;
                  &lt;div class="header-bar__main"&gt;
                      &lt;div class="header-heading"&gt;
                          &lt;h1 class="page-title"&gt;noHold Application&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a class="btn btn--small btn--icon ng-scope" title="Logout"&gt;&lt;span class="icon-sign-out"&gt;&lt;/span&gt;&lt;/a&gt; // this line should be displayed only if user logs in.
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;div class="content"&gt;
              &lt;div class="content__main"&gt;
                  &lt;div class="container"&gt;
                      &lt;app-root&gt;Loading... &lt;/app-root&gt;        
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    static loggedIn = false;
  
    getLoggedIn() {
      return AppComponent.loggedIn;
    }
  
  }
  </code></pre>