Forms and two way binding with angular.

JavaScript 
We look at two way binding in angular especially in forms.

The view file

<!--The content below is only a placeholder and can be replaced.-->
<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        {{ title }}
      </h1>
      <h2 class="subtitle">
        Bulma is a simple css framework. Lets try out some two way bind.
      </h2>
    </div>
  </div>
</section>
<section class="section">
  <div class="container">

    <div class="field">
      <label class="label">User Name</label>
      <div class="control">
        <input class="input" [(ngModel)]="name" type="text" placeholder="Text input">
      </div>
    </div>

    <div class="field">
      <label class="label">Description</label>
      <div class="control">
        <textarea class="textarea" [(ngModel)]="description" placeholder="e.g. Hello world"></textarea>
      </div>
    </div>

    <div class="field">
      <label class="label">Profession</label>
      <div class="control">
        <div class="select">
          <select [(ngModel)]="prof">
            <option *ngFor="let profession of professions" value="{{ profession }}">
              {{ profession }}
            </option>
          </select>
        </div>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input type="checkbox" [(ngModel)] ="terms">
          I agree to the <a href="#">terms and conditions</a>
        </label>
      </div>
    </div>

    <div class="field is-grouped">
      <div class="control">
        <button (click)='saveForm()' class="button is-link">Submit</button>
      </div>
      <div class="control">
        <button (click)='clearForm()' class="button is-text">Cancel</button>
      </div>
    </div>


  </div>
</section>



Notes

README