title: Angular2 reusable add and edit components
body: <p>I am new to angular2 and working on a basic design to show a list of products and allowing user to add a new item and edit the existing item. For each row there is an edit button which will retrieve the row data and display it on the text areas.
  For Add and edit i am trying to use the same component.
  Add option works fine (using ngModel) and it post the data on server without any issues but when i click on edit button the data is not retreived on the modifyoptions.component page. If i click on other rows it starts working properly.
  If i remove ngModel from modifyoptions.component.html it works fine.</p>
  
  <p>This is my <strong>modifyoptions.component.html</strong> file. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;label&gt;Price&lt;/label&gt;
  &lt;input type = "text" id = "itemPrice" value =  {{dataToEdit.price}} [(ngModel)] = "newItemData.price"&gt;
  &lt;label&gt;Name&lt;/label&gt;
  &lt;input type = "text" id = "itemName" value =  {{dataToEdit.name}} [(ngModel)] = "newItemData.name"&gt;
  &lt;label&gt;Brand&lt;/label&gt;
  &lt;input type = "text" id = "itemBrand" value =  {{dataToEdit.brand}} [(ngModel)] = "newItemData.brand"&gt;
  &lt;label&gt;Description&lt;/label&gt;
  &lt;input type = "text" id = "itemDescription" value =  {{dataToEdit.description}} [(ngModel)] = "newItemData.description"&gt;
  
  &lt;button type="button" id = "btnSaveItem" (click) = "addNewItems()"
    class="navbar-toggle collapsed" 
    data-toggle="collapse"&gt;
      Save&lt;/button&gt;
  </code></pre>
  
  <p><strong>modifyoptions.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit ,Input} from '@angular/core';
  import {FetchDataService} from '../Services/fetch-data.service';
  
  @Component({
    selector: 'app-modifyoptions',
    templateUrl: './modifyoptions.component.html',
    styleUrls: ['./modifyoptions.component.css']
  })
  export class ModifyoptionsComponent implements OnInit {
  
    constructor(public fetchDataSvc : FetchDataService) { 
  
    }
  
    ngOnInit() {
    }
  
    newItemData:any = {};
  
    @ Input() dataToEdit:any;
  
  
    addNewItems(){
      console.log(this.newItemData);
      this.fetchDataSvc.modifyListOfProducts(this.newItemData)
      .subscribe((result) =&gt; {console.log(result)},
      error =&gt; {
        console.log(error);
      });
    }
  }
  </code></pre>
  
  <p>My product list file in which i am adding the row and retrieving the value on edit <strong>product.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table class="table table-striped table-hover "&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;#&lt;/th&gt;
        &lt;th&gt;id&lt;/th&gt;
        &lt;th&gt;Price&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Brand&lt;/th&gt;
        &lt;th&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let item of jsonProductList" &gt;
        &lt;td&gt;#&lt;/td&gt;
        &lt;td&gt;{{item._id}}&lt;/td&gt;
        &lt;td&gt;{{item.price}}&lt;/td&gt;
        &lt;td&gt;{{item.name}}&lt;/td&gt;
        &lt;td&gt;{{item.brand}}&lt;/td&gt;
        &lt;td&gt;{{item.description}}&lt;/td&gt;
        &lt;td&gt;&lt;button type="button" id = "btnEditItem" (click) =  "showEditDialog(item)"
    class="navbar-toggle collapsed" 
    data-toggle="collapse"&gt;
      Edit&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt; 
  
  &lt;div *ngIf="showEditFlag==true"&gt;
      &lt;app-modifyoptions [dataToEdit] = "item"&gt;&lt;/app-modifyoptions&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component file : </p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {FetchDataService} from '../Services/fetch-data.service';
  
  @Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
  })
  export class ProductComponent implements OnInit {
  
    jsonProductList : any;
    showEditFlag = false;
  
    item :any;
  
   // component is already loaded but line 18 will be executed based on the server response.
    constructor(fetchDataSvc : FetchDataService) {
      fetchDataSvc.getListOfProducts().subscribe((result) =&gt; {console.log(this.jsonProductList = result)},
      error =&gt; {
        console.log(error);
      });
     }
  
    ngOnInit() {
    }
  
    showEditDialog(item){
       this.showEditFlag = true;
       this.item = item;
       console.log(item);
    }
  
  }
  </code></pre>