title: error with some property undefined in html file angular
body: <p>i have the following code in user.component.html, in console said: <strong>ERROR TypeError: Cannot read property 'first_name' of undefined.</strong></p>
  
  <p>but the property binds the input correctly with the data i spected, but the error still appears.</p>
  
  <p>i think the property try to bind before the data comes to the controller, but i not have idea whats happend.</p>
  
  <p>i'm relatively new in angular.</p>
  
  <pre><code>&lt;button type="button" class="btn btn-outline-primary" (click)="regresarHome()"&gt;Regresar&lt;/button&gt;
  &lt;div class="row"&gt;
      &lt;div class="card offset-3 col-md-6"&gt;
          &lt;div class="card-body"&gt;
              &lt;form&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="first_name"&gt;Nombre&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="first_name" name="first_name" placeholder="Ingresa tu nombre " value="{{_user.first_name}}" #first_name&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="last_name"&gt;Apellidos&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="last_name" name="last_name" placeholder="Ingresa tu(s) apellidos " value="{{_user.last_name}}" #last_name&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
                      &lt;input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" value="{{_user.email}}" #email&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group form-check"&gt;
                      &lt;input type="checkbox" class="form-check-input" id="user_active" [checked]="_user.active == 1" #active&gt;
                      &lt;label class="form-check-label" for="exampleCheck1"&gt;Usuario Activo&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="username"&gt;Nombre de usuario&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="username" name="username" placeholder="Ingresa tu nombre de usuario" value="{{_user.username}}" #username&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Contraseña&lt;/label&gt;
                      &lt;input type="password" class="form-control" id="password" name="password" placeholder="Password" value="{{_user.password}}" #password&gt;
                  &lt;/div&gt;
                  &lt;button type="button" class="btn btn-outline-primary btn-block" (click)="guardarUsuario(first_name.value,last_name.value,email.value,active.checked,username.value,password.value)"&gt;Guardar&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my controller code is the following:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SakilaService } from '../../Services/sakila.service';
  import { Router, ActivatedRoute } from '@angular/router';
  import { IUser } from '../../Models/IUser';
  import { formatDate } from '@angular/common';
  
  @Component({
    selector: 'app-user',
    templateUrl: './updateUser.component.html'
  })
  export class UpdateUserComponent implements OnInit {
  
    _user_id: number;
    _user: any;
  
    constructor(private sakilaService: SakilaService,
      private router: Router,
      private _activatedRoute: ActivatedRoute) {
      this._activatedRoute.params.subscribe(params =&gt; {
        this._user_id = params.user_id;
      });
  
      if (this._user_id !== 0) {
        this.sakilaService.getUserById(this._user_id)
          .subscribe(
            (data) =&gt; {
              this._user = data.data;
            }
          );
      }
    }
  
    ngOnInit() { }
  
    regresarHome() {
      this.router.navigate(['home']);
    }
  
    guardarUsuario(first_name: string, last_name: string, email: string, active: boolean, username: string, password: string) {
      let usuario: IUser = {} as IUser;
      usuario.staff_id = this._user_id;
      usuario.first_name = first_name;
      usuario.last_name = last_name;
      usuario.address_id = 1;
      usuario.picture = null;
      usuario.email = email;
      usuario.store_id = 1;
      usuario.active = active;
      usuario.username = username;
      usuario.password = password;
      usuario.last_update = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss', 'en-us');
      this.sakilaService.updateUser(usuario);
    }
  
  }
  
  </code></pre>
  
  <p>and the code for IUser is:</p>
  
  <pre><code>export interface IUser {
      staff_id?: number;
      first_name: string;
      last_name: string;
      address_id: number;
      picture: Blob;
      email: string;
      store_id: number;
      active: boolean;
      username: string;
      password: string;
      last_update: string;
  }
  
  </code></pre>