title: Using Angular and Ionic, how can I add elements to the DOM on a button click
body: <p>I'm working on an app using Ionic and Angular and would like the user to add input fields as they need. All tutorials I see on this topic are using Angular 1.x and I'm using Angular 4.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;ion-content&gt;
  
      &lt;ion-row id="row" ng-repeat= "emailinput of emailinputs"&gt;
        &lt;ion-col col-3 id="label"&gt;
          Email
        &lt;/ion-col&gt;
        &lt;ion-col col-8 id="emailcol"&gt;
          &lt;input type="email" id="email" placeholder="jdoe@gmail.com" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput"&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
  
    &lt;div padding&gt;
      &lt;button (click) = "addnewemail(emailinput)" id="register" ion-button full color="nudgetprim" block&gt;Add&lt;/button&gt;
      &lt;button (click) = "sendinvite(emailVal)" id="register" ion-button full color="nudgetprim" block&gt;Invite&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The Typescript for the button is:</p>
  
  <pre><code>addnewemail(emailinput) {
      console.log(emailinput)
      var emailinputs = [];
  
      var newItem = emailinputs.length+1;
      emailinputs.push({'id' : 'row' + newItem, 'name' : 'row' + newItem});
  }
  </code></pre>