title: Refresh a particular component in Angular
body: <p>New to angular, so might sound a trivial question, however all solution provided on SO have failed to work so far.
  I have a simple login component wherein on submit, I redirect the user to profile page. I am able to send the user to the said component but the nav bar on top does not auto refresh, i.e. I have kept a session check, so when user logs in, the nav bar should automatically show the <code>Logout</code> button instead of <code>Login/Register</code> button. My code files are something like this:</p>
  
  <p><strong>login-page.component.html</strong></p>
  
  <pre><code>&lt;form #loginForm="ngForm" (ngSubmit)="loginUser(loginForm)" id="loginForm" class="loginbackground"&gt;
  &lt;input ngModel #emailAddress="ngModel" type="text" autocomplete="off" placeholder="Email" id="emailAddress" name="emailAddress" /&gt;
  &lt;button type="submit" id="submit"&gt;LOGIN&lt;/button&gt;
  </code></pre>
  
  <p><strong>login-page.component.ts</strong></p>
  
  <pre><code>@Output() refreshEvent = new EventEmitter&lt;any&gt;();
  loginUser(event) {
  // Validations. If successful, proceed
  
  const formData = event.value;
  this.auth.loginUser(formData);
    .subscribe(data =&gt; {
      localStorage.setItem('loggedUser', JSON.stringify(data.userdata));
      // Form submit action here
      if (data.userdata.resMsg === 'Login failed') {
        this.errorPopup = true;
        this.errorText = 'Email Address and Password do not match';
      } else {
        this.refreshEvent.emit();
        this.emailAvailable = true;
        this.showLogin = false;
        this.showRegister = false;
        this.router.navigateByUrl('/404', { skipLocationChange: true }).then(() =&gt;
          this.router.navigate(['user-profile']));
      }
    });
  });
  }
  </code></pre>
  
  <p><strong>Problem</strong><br/>
  When I manually refresh the page, the nav bar reflects the changes as per written logic which works fine. However, I want this to happen when the user actually logs in and there shouldn't be a need to manually refresh the page.</p>
  
  <p><strong>What I've tried</strong><br/></p>
  
  <ul>
  <li>I have tried using the answer <a href="https://stackoverflow.com/questions/47813927/how-to-refresh-a-component-in-angular?rq=1">here</a> but it does not work. </li>
  <li>As shown above, I have tried an event emitter but I am not able to get it to work.</li>
  <li>I tried refreshing the entire page using <code>ngOnInit()</code> to reload the
  nac bar component but it goes into and infinite loop (which is
  obviously a hack; but why not)</li>
  </ul>
  
  <p>Is there a way that this can be achieved cleanly?</p>