title: Angular 2- How to refresh HTML after updating flag value of component?
body: <p>I am working ton angular 4.  I have basic structure of my app is like this.</p>
  
  <p><strong>AppComponent.ts</strong></p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  
  
  &lt;router-outlet &gt;&lt;/router-outlet&gt;
  
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>Now, i have a problem here.my menu bar is in headrer component that loads only once in my project. i want to change some menu bar items on run time.for that purpose i have set flag in header.component.ts.</p>
  
  <p>Now, from that component where i want to change menu bat, i call the function of headercomponent.ts which set the value of flag. i successfully call the function and it also update the value of flag. but html did not changes.</p>
  
  <p>Here is my <strong>headercomponent.ts</strong> function which set value of flag.</p>
  
  <pre><code> setflag()
    {
      alert("sadads")
      this.flag=true
  
  
      console.log(this.flag)
      this.ref.detectChanges();
      this.ref.reattach();
    }
  </code></pre>
  
  <p>and here is HTML part in <strong>headercomponent</strong> that i want to update.</p>
  
  <pre><code> &lt;ul class="dropdown-menu"&gt;
                        &lt;li &gt;&lt;a [routerLink]="['/login']"&gt;Log in&lt;/a&gt;&lt;/li&gt;
  
                        &lt;li&gt;&lt;a [routerLink]="['/register']"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
                        &lt;li *ngIf="flag==true"&gt;&lt;a [routerLink]="['/register']"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  </code></pre>
  
  <p>and from <strong>homecomponent.ts</strong> i am calling this function like this.</p>
  
  <pre><code>import {HeaderComponent} from "../header/header.component";
    providers: [HeaderComponent]
  
    constructor(private ref: ChangeDetectorRef,private comp: HeaderComponent) {
  
    }
  
    ngOnInit() {
  
      this.comp.setflag();
  }
  </code></pre>
  
  <p>this will call the function from header and change the value of flag. but that change value will not invoke changes in html.</p>
  
  <p>Can any body tell me, how can i update html in headercomponent in this scenario.
  Any help will be highly appreciated.</p>