title: Edit and Remove the respective values on button click using angular
body: <p>I am trying to remove a value from the array. I have written the logic to remove the value on 'Remove' link click. When I click on the Remove button which is againist to the item, only that item has to be removed. But, whatever item I was
  trying to remove, it was removing only the last added item.</p>
  
  <p>Also, Whenever I click on Edit, those values needs to be displayed in dropdownlist, textbox, checkbox or datepicker and should be able to save the values in the same item instead of creating new one. I couldn't understand of how I can
  achieve this functionality.</p>
  
  <p>Can someone help me with these?</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class="col col-12 col-spacing"&gt;
    &lt;div&gt;
      &lt;md-select [placeholder]="result" [(ngModel)]="selectedItemType"&gt;
        &lt;md-option *ngFor='let attr of result' [value]="attr.fieldType" selected="attr.fieldType"&gt; {{attr.attribute}}
        &lt;/md-option&gt;
      &lt;/md-select&gt;
    &lt;/div&gt;
    &lt;div *ngIf="selectedItemType =='string' || selectedItemType =='decimal'"&gt;
      &lt;input placeholder="Enter Text" type="text" class="input" [(ngModel)]="txtEntered"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div *ngIf="selectedItemType == 'date'"&gt;
        &lt;md-input-container class="datepicker-align"&gt;
          &lt;input mdInput [mdDatepicker]="startDatepicker" placeholder="Select Date" name="StrtDate" id="txtStrtDate" [(ngModel)]="date"
            #startDate&gt;
          &lt;button id="btnOpnStartDate" mdSuffix [mdDatepickerToggle]="startDatepicker"&gt;&lt;/button&gt;
        &lt;/md-input-container&gt;
        &lt;md-datepicker #startDatepicker&gt;&lt;/md-datepicker&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div *ngIf="selectedItemType == 'boolean'"&gt;
      &lt;input type="checkbox" [(ngModel)]="chkBox" /&gt;
    &lt;/div&gt;
    &lt;button *ngIf="selectedItemType" md-raised-button (click)="Add()" color="accent"&gt;Add&lt;/button&gt;
    &lt;md-list *ngFor='let selVal of finalValues'&gt;
      &lt;md-list-item&gt; 
        &lt;span&gt; {{ selVal.attributeName }} &lt;/span&gt;
        &lt;span *ngIf="txtEntered"&gt;{{ selVal.value }} &lt;/span&gt;
        &lt;span *ngIf="date"&gt;{{selVal.date}} &lt;/span&gt;
        &lt;span *ngIf="chkBox"&gt; {{selVal.checked}} &lt;/span&gt;
        &lt;a href="#" md-menu-item color="warn" (click)="HandleEdit()" &gt;Edit&lt;/a&gt;
        &lt;a href="#" md-menu-item color="warn" (click)="HandleRemove(selVal.attributeName, selVal.value, selVal.date, selVal.checked)"&gt;Remove&lt;/a&gt;
      &lt;/md-list-item&gt;
    &lt;/md-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my typescript class. </p>
  
  <pre><code>export class testing {
  
      Add() {
        this.finalValues.push(new SelectedList(this.selectedItemType, this.txtEntered, this.date, this.chkBox));
      }
  
      HandleEdit() {
  
        return false;
      }
  
      HandleRemove(attr, txtValue, dateVal, checkBoxVal) {
        this.finalValues.splice(this.finalValues.indexOf(attr), 1);
        return false;
      }
    }
  </code></pre>
  
  <p>Here is my model class</p>
  
  <pre><code> export class SelectedList {
      constructor(
          public attributeName: any,
          public value: any,
          public date: any,
          public checked: boolean
      ) {}
  }
  </code></pre>