Cacher is the code snippet organizer for pro developers

@Component({
  template: `
    <form #f="ngForm">
       <input type="text" name="firstName" [ngModel]="firstName">
       <input type="number" name="quantity" [ngModel]="num">
       <input type="date" name="date" [ngModel]="date">
       <input type="color" name="favcolor" [ngModel]="color">
       <input type="range" name="points" [ngModel]="range">
       <input type="time" name="time" [ngModel]="time">
       <textarea name="summary" [ngModel]="summary"></textarea>
    </form>
    <p>Form value: {{ f.value | json }}</p>  
    <!-- { "firstName": "Netanel", "quantity": 3, "date": "2016-03-09", "favcolor": "#ff0080", "points": 13, "time": "22:53:05", "summary": "Summary"  } -->
  `,
})
export class App {
  num = 3;
  date = "2016-03-09";
  color = "#ff0080";
  range = 13;
  time = "22:53:05";
  firstName = "Netanel";
  summary = "Summary";
}