title: Angular component not reloading after login
body: <p>I have an Auth service that logs in, but it doesn't update the component live. Does Angular not do this?</p>
  
  <p>The login component ts, not in ngOnInit:</p>
  
  <pre class="lang-js prettyprint-override"><code>onSubmit() {
      this.authService.login(this.f.username.value, this.f.password.value)
      .pipe(first())
      .subscribe(
      data =&gt; {
           this.router.navigate([this.returnUrl]);
      },
      error =&gt; {
          this.error = error;
          this.loading = false;
      });
  }
  </code></pre>
  
  <p>In the user components HTML file, I have</p>
  
  <pre><code>&lt;ul class="logged-in" *ngIf="currentUser"&gt;
    &lt;li&gt;Logged in menu item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The user component ts: </p>
  
  <pre class="lang-js prettyprint-override"><code>export class UserMenuComponent implements OnInit {
    currentUser: User;
    userFromApi: User;
  
    constructor(
        private userService: UserService,
        private authService: AuthService
    ) {
       this.currentUser = this.authService.currentUserValue;
    }
  
    UserMenu(){
      if(this.currentUser){
        this.userService.getById(this.currentUser.id).pipe(first()).subscribe(user =&gt; {
          this.userFromApi = user[0];
        });
      }
    }
  
    ngOnInit() {
  
      // check user
      this.UserMenu();
    }
  }
  </code></pre>
  
  <p>I'm importing everything correclyt, so I have left out some obvious code.</p>
  
  <p>This works if I refresh it.</p>