title: How to properly set a value in an Angular Observable subscribe function
body: <p>I have a simple form using @angular/material (although this doesn't matter, as it also doesn't work with a regular non material form) that looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;user&quot;&gt;
      &lt;form&gt;
          &lt;mat-form-field&gt;
              &lt;mat-label&gt;Username&lt;/mat-label&gt;
              &lt;input matInput required type=&quot;text&quot; name=&quot;username&quot; [(ngModel)]=&quot;user.username&quot; /&gt;
          &lt;/mat-form-field&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The typescript for this component looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>export class UserDetailComponent implements OnInit {
    user?: User;
  
    constructor(private apiService: ApiService, private logService: LogService, private route: ActivatedRoute) { }
  
    ngOnInit(): void {
        this.getUser();
    }
  
    getUser(): void {
      const id = this.route.snapshot.paramMap.get('id') as Guid;
  
      this.apiService.getUserById(id)
        .subscribe(userResult =&gt; {
          if (userResult.isValid) {
            this.logService.log(&quot;Setting user&quot;)
            this.user = userResult.result;
          } else {
            // TODO Handle error
            this.error = true;
          }
        });
    }
  }
  </code></pre>
  <p>My problem now is this: The <code>user</code> property gets set to the correct value (inspected it in the debugger) and the console log <code>Setting user</code>. But for some reason, my form doesn't contain the correct value, the input field is empty and the two way binding doesn't work to update the UI. Funnily enough though, Angular realizes that a value is set for the user property, else it wouldn't render the input at all.</p>
  <p>I'm quite new to Angular (and typescript) is there something obvious I missed?</p>