title: How to dynamically add and remove form fields in Angular 2
body: <p>I'm trying to add input fields dynamically while the user clicks the add button and for each form field there must be a remove button, when the user clicks that the form fields must be removed, I need to achieve this using Angular 2, as I'm new to Angular 2 please help me to complete it</p>
  
  <p>What I have tried </p>
  
  <p>I have created a set of fields (3 select box and 1 text box), created a button called add fields, but I have tried it in angular 1.x its working fine but in angular 2 I don't know how to complete it, this is <a href="http://plnkr.co/edit/8rZyS06ByBfH4IOIVo2T?p=preview" rel="noreferrer">link</a> of my full work  </p>
  
  <pre><code>app/app.component.ts
   import {
      Component
    }
  from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `
      &lt;h1&gt;{{title}}&lt;/h1&gt;
      &lt;div class="container"&gt;
      &lt;button class="btn btn-success bt-sm"&gt;add&lt;/button&gt;
      &lt;form role="form" calss="form-inline"&gt;
      &lt;div class="form-group col-xs-3"&gt;
      &lt;label&gt;Select State:&lt;/label&gt;
      &lt;select class="form-control" [(ngModel)]="rules.State" id="sel1"&gt;
              &lt;option&gt;State1&lt;/option&gt;
              &lt;option&gt;State2&lt;/option&gt;
              &lt;option&gt;State3&lt;/option&gt;
              &lt;option&gt;State4&lt;/option&gt;
  &lt;/select&gt;
       &lt;/div&gt;
      &lt;div class="form-group col-xs-3"&gt;
  &lt;label&gt;Rule:&lt;/label&gt;
       &lt;input type="text" data-toggle="modal" data-target="#myModal" class="form-                   control"&gt;
      &lt;/div&gt;
  &lt;div class="form-group col-xs-3"&gt;
  &lt;label&gt;Pass State :&lt;/label&gt;
      &lt;select class="form-control" [(ngModel)]="rules.pass"&gt;
      &lt;option&gt;State1&lt;/option&gt;
      &lt;option&gt;State2&lt;/option&gt;
      &lt;option&gt;State3&lt;/option&gt;
      &lt;option&gt;State4&lt;/option&gt;
  &lt;/select&gt;
   &lt;/div&gt;
   &lt;div class="form-group col-xs-3"&gt;
      &lt;label&gt;Fail State:&lt;/label&gt;
          &lt;select class="form-control" [(ngModel)]="rules.fail"&gt;
          &lt;option&gt;State1&lt;/option&gt;
          &lt;option&gt;State2&lt;/option&gt;
          &lt;option&gt;State3&lt;/option&gt;
       &lt;option&gt;State4&lt;/option&gt;
       &lt;/select&gt;
           &lt;/div&gt;
      &lt;/form&gt;
       &lt;/div&gt;
   &lt;div class="modal fade" id="myModal" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                       &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times    &lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Rules Configuration&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                   &lt;p&gt;Rules&lt;/p&gt;
                  &lt;/div&gt;
                   &lt;div class="modal-footer"&gt;
                   &lt;button type="button" class="btn btn-default" data-  dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
  
                  &lt;/div&gt;
                   &lt;/div&gt;
  `
      })
      export class AppComponent {
              title = 'Rule Engine Demo';
            rules: Rules = {
                    State: '',
                    pass: '',
                   fail: ''
                  };
  </code></pre>