title: Angular 6+ TypeError: Cannot read property 'firstName' of undefined
body: <p>My (Angular 6.1.2) view is loading in before my observable does thus creating the undefined error. The data ends up there properly after the console error. </p>
  
  <p>COMPONENT</p>
  
  <pre><code>ngOnInit() {
     this.route.params.subscribe(params =&gt; {
          this.UserId = params['id'];
  
          this.objectService.get(this.UserId).subscribe((ret: user) =&gt; {
              this.User = user;
          });
      });
  }
  </code></pre>
  
  <p>SERVICE</p>
  
  <pre><code>public get(id: string): Observable&lt;User&gt; {
      return this.http.get&lt;User&gt;(`${this.api}/${id}`);
  }
  </code></pre>
  
  <p>HTML</p>
  
  <p><code>&lt;h1&gt;{{User.firstName}}&lt;/h1&gt;</code></p>
  
  <p>Checking it first suppresses the error.</p>
  
  <p><code>&lt;h1 *ngIf="User"&gt;{{User.firstName}}&lt;/h1&gt;</code></p>
  
  <p>but I'd like to know how to do this correctly from the controller and or service so that my view works without checking for the data.
  Using the in-memory-api btw.</p>
  
  <p><strong>UPDATE 2019:</strong>
  I've switched to resolving data with the router where I can then this issue is easy to handle with async pipe in the template. This method has saved me many headaches.</p>
  
  <p><strong>UPDATE:</strong>
  It seems unanimous that we shouldn't be checking in the view. Properly setting the variables before they are used seems to be the best way. I've chosen to leverage the exported class when I set the variable like this:</p>
  
  <p><code>public user: User = new User();</code> which stops the undefined error.</p>