title: How to add a new row on click of a button in angular 4
body: <p><a href="https://i.stack.imgur.com/T4Wgg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T4Wgg.png" alt="enter image description here"></a>I have the below code to create a row and a button Add Person. On click of Add person , i want to create one more row with Person 2, Person 3 and so on.
  <a href="https://i.stack.imgur.com/VCzvO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VCzvO.png" alt="enter image description here"></a>  . How can I achieve it.</p>
  
  <pre><code>&lt;div class="splitTheBill-row"&gt;
          &lt;div class="splitTheBill-left"&gt;
            &lt;div class="userIcon"&gt;
              &lt;div class="splitTheBill-user"&gt;
                &lt;img src="assets/images/person.png" alt="My Profile"&gt;
              &lt;/div&gt;
              &lt;div class="input-field national-id pull-left"&gt;
                &lt;input id="form3" class="form-control" type="text"&gt;
                &lt;label for="form3" class=""&gt;Person 1&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="splitTheBill-right"&gt;
            &lt;div class="input-field national-id pull-left"&gt;
              &lt;input id="form4" class="form-control" type="text"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="addperson-btncont"&gt;
          &lt;div class="reg-submitCont"&gt;
            &lt;button url="#" class="btn-secondary waves-effect waves-light btn"&gt;Add Person&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>