title: How to avoid repeat of data when entered using angular2 or typescript
body: <p>I have a div with contents and have an add button, if i click on add button, the same contents div is displayed/added.. If i click on add button multiple times, those many times the div i repeated. Till this it is working fine, but when i enter data to any one div, same data is reflecting on the addition div. Can anyone help me to solve this issue. I need data to be on the div where i type and rest div must stay empty.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;md-card *ngFor="let position of products; let row_ind = index "&gt;
   &lt;div&gt;
    &lt;md-input-container&gt;
       &lt;input mdInput type="text" name="position.workName [(ngModel)]="workDetails.workName"&gt; &lt;/md-input-container&gt;
    &lt;md-input-container&gt; &lt;input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workPlace" &gt; &lt;/md-input-container&gt;
  &lt;/div&gt;
   &lt;div &gt;
    &lt;md-input-container&gt;&lt;input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workUnit"&gt; &lt;/md-input-container&gt;
    &lt;md-input-container&gt; &lt;input mdInput type="text" name="position.workName" [(ngModel)]="workDetails.workCountry" &gt; &lt;/md-input-container&gt; &lt;/md-card&gt;
  </code></pre>
  
  <p>ts:</p>
  
  <pre><code>this.products = [{
        "workName": "",
        "workPlace":"",
        "workUnit":"",
        "workCountry":""
      }];
  
  open(){
      var item = {
        "workName": "",
        "workPlace":"",
        "workUnit":"",
        "workCountry":"",
      }    
      this.products.push(item);
    }
  
  public products:Array&lt;any&gt;;
  
  export class Work {
    public workName:string;
    public workPlace: string;
    public workUnit: string;
    public workCountry :string;
  }
  
  Public workDetails:workDetails = new Work();
  </code></pre>