title: Angular 6 - ERROR TypeError: Cannot read property 'value' of undefined
body: <p>I'm new to Angular and Typescript and cannot get to the bottom of this console error: "ERROR TypeError: Cannot read property 'value' of undefined"</p>
  
  <p>I'm calling a silly service that returns a Chuck Norris joke. This actually works OK. I'm getting Typescript console errors however.</p>
  
  <p>I've reproduced here:
  <a href="https://stackblitz.com/edit/angular-chuck" rel="noreferrer">https://stackblitz.com/edit/angular-chuck</a> </p>
  
  <p>Many thanks for looking.</p>
  
  <p><strong>data.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  import { DataModel } from './data.model';
  
  @Injectable()
  export class DataService {
    constructor( private http: HttpClient ) { }
  
    chuckUrl = 'https://api.chucknorris.io/jokes/random';
  
    getChuck() {
        return this.http.get&lt;DataModel&gt;(this.chuckUrl);
    }
  
  }
  </code></pre>
  
  <p><strong>data.model.ts</strong></p>
  
  <pre><code> export class DataModel {
      public category: any;
      public icon_url: string;
      public id: string;
      public url: string;
      public value: string;
  }
  </code></pre>
  
  <p><strong>data.component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from './data.service';
  import { DataModel } from './data.model';
  
  @Component({
      selector: 'app-data',
      templateUrl: './data.component.html'
  })
  
  export class AppData implements OnInit {
      constructor(private dataService: DataService) { }
  
      joke: DataModel;
  
      ngOnInit() {
  
          this.dataService.getChuck()
              .subscribe(
                  (data: DataModel ) =&gt; {
                    if (data.category != 'explicit') {
                      this.joke = data;
                    } 
                  }
              ); 
      }
  
  }
  </code></pre>