title: ngModel binding data angular 4
body: <p>I have a response json data like this:</p>
  
  <pre><code>{
    "trainingClassId": 22,
    "classId": "class001",
    "startDate": 1541178000000,
    "endDate": 1510333200000,
    "examDate": 1510333200000,
    "numOfAttendee": "15"
  }
  </code></pre>
  
  <p>on service:</p>
  
  <pre><code>getDetailApp(id: number):  Promise&lt;any[]&gt; {
      const url = `${this.URL}/${id}`;
      return this.http.get(url)
        .toPromise()
        .then(response =&gt; response.json())
        .catch(this.handleError);
    }
  </code></pre>
  
  <p>on ts file:</p>
  
  <pre><code>ngOnInit() {
  
      this.getAppDetail();
      };
  
       async getAppDetail(){
         await this.appService.getDetailApp(this.data.id).then(data =&gt;this.sub = data);
  
        console.log("=="+this.sub.classId);
      } 
  </code></pre>
  
  <p>in html file:</p>
  
  <pre><code> &lt;mat-form-field&gt;
                  &lt;input matInput [(ngModel)]="sub.classId" name="classId" id="classId" placeholder="Class ID"&gt;
  
              &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>when init html page, the input classID show data well. but in console browser it shows error message:</p>
  
  <pre><code> ERROR TypeError: Cannot read property 'classId' of undefined
      at Object.eval [as updateDirectives]
  </code></pre>
  
  <p>after that, the page is crash. I cannot do anything on this.
  Please advice me.</p>