Two-way binding

The perfect time to start showing some form controls using the form component in the browser is right now. Keeping the state in sync between the data layer (model) and the view can be very challenging, but with Angular it's just a matter of using one directive exposed from FormModule:

<!-- ./app/flight-form/flight-form.component.html --><form>  <div class="form-group">    <label for="fullName">Full Name</label>    <input       type="text"       class="form-control"       [(ngModel)]="flightModel.fullName"      name="fullName"    >  </div></form>
Angular relies on the name attribute internally to carry out binding. For this reason, the name attribute is required.

Pay attention to [(ngModel)]="flightModel.fullName"; it's trying to bind a property on the component ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.