title: How do you submit a new object to an array via multiple inputs angular2
body: <p>Hoping for some help on a more complex example that expands on the examples in angular's <a href="https://angular.io/docs/ts/latest/guide/user-input.html" rel="nofollow">Tour of Heroes</a></p>
  
  <p>Rather than submitting a single string each time, how would you submit multiple values like in the following example e.g.: </p>
  
  <pre><code>          export class LittleTourComponent {
                 heroes = [ {
                              'name':'Hulk',
                              'power':'strength'
                          },{
                              'name':'Bulk',
                              'power':'appetite'
                          }];
  </code></pre>
  
  <p>I presume a new 'entry' made up of the submitted values should be pushed to the heroes array something like this:</p>
  
  <pre><code>addHero(newHero) {
          if (newHero) {
  
            var entry = {
              'name': newHero.name, 
              'power': newHero.power
              };
  
            this.heroes.push(entry);
          }
      }
  </code></pre>
  
  <p>But what would be required in the template? Would you still use <code>keyup.enter</code> in this case?:</p>
  
  <p>template: </p>
  
  <pre><code>&lt;label&gt;name&lt;/label
  // how should the inputs be filled out in this scenario?
  &lt;input &gt;
  &lt;label&gt;power&lt;/label&gt;
  &lt;input &gt;
  
  &lt;button (click)=addHero(newHero)&gt;Add&lt;/button&gt;
  
   &lt;ul *ngFor="let hero of heroes"&gt;
    &lt;li&gt;name:{{hero.name}}&lt;/li&gt;
    &lt;li&gt;power:{{hero.power}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>example also on <a href="http://plnkr.co/edit/zywaBtGeE6GghBED6WoH?p=preview" rel="nofollow">plnkr</a> </p>
  
  <p>Any help appreciated. thanks!</p>