title: How can I 'refresh' a component in Angular without reloading a page?
body: <p>The menu bar of my application should have text inputs and sign in button if user is not logged in and it should have a sign out button when the user is logged in. These two groups are mutually exclusive.</p>
  
  <p>I have written the code as follows:</p>
  
  <pre><code>&lt;div *ngIf=”userNotLoggedIn”&gt;
    &lt;li&gt;some li&lt;/li&gt;
  &lt;/div&gt;
  &lt;div *ngIf=”!userNotLoggedIn”&gt;
    &lt;li&gt;some other li&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>userNotLoggedIn</code> is initially set to <code>true</code> and gets updated to <code>false</code> once login is successful. My issue is that the change in value of <code>userNotLoggedIn</code> doesnt update my component i.e. I still see the login/password text and not sign out link.</p>
  
  <p>I also tried this variant but that doesn't work either</p>
  
  <pre><code>&lt;div &gt;
    &lt;li [hidden]=”userNotLoggedIn”&gt;some li&lt;/li&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;li [hidden]=”!userNotLoggedIn”&gt;some other li&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>userNotloggedIn:boolean</code> is defined as boolean and I set its initial value to <code>true</code> in <code>ngOnInit</code></p>
  
  <pre><code> ngOnInit(){
  
      this.userNotloggedIn = true;
  
    }
  </code></pre>