How to dynamically add and remove form fields in Angular 2
<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>