title: Angular - String interpolation of undefined variable
body: <p>I am trying to display some information which is fetched from an external API on a web page by using Angular's string interpolation.</p>
  
  <p>When no information is fetched or hasn't "arrived" yet, I want to display 'N/A'.</p>
  
  <p>I have tried the following approach, however I get an error saying: 
  'Can't read property 'name' of undefined' on line 2 of the following html code.</p>
  
  <p>How can I show N/A while waiting for the response to be defined?</p>
  
  <p>app.component.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="api-info"&gt;
      {{ !!this.apiInfo.name ? this.apiInfo.name : 'N/A' }}
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { ApiInfo } from 'src/app/apiInfo.model'
  import { ApiService } from 'src/app/api.service'
  (...)
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit, OnDestroy {
      apiInfo: ApiInfo;
      apiInfoSub: Subscription;
  
      constructor(apiService: ApiService) {}
  
      ngOnInit() {
          // apiService.apiInfo is a Subject&lt;ApiInfo&gt; where the API response is stored
          this.apiInfoSub = this.apiService.apiInfo.subscribe(
              (response) =&gt; {
                  this.apiInfo = response;
              }
          );
      }
  
      ngOnDestroy() {
          this.apiInfoSub.unsubscribe();
      }
  }
  </code></pre>
  
  <p>apiInfo.model.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class ApiInfo {
      public name: string,
      public id: number,
  
      constructor(name: string, id: number) {
          this.name = name;
          this.id = id;
      }
  }
  </code></pre>