CODEWITHSUNDEEP
angulartypescriptdrop-down-menu
LOKI
LOKI

Reputation: 312

how to get old and new value from dropdown in angular2

The below code is dropdown with OnChange event on dropdown. $event.target.value is giving me only the new value (which is after selection) .How can I get the previous value (value before selection) using onChanges event.

 <select class="form-control selectpicker selector" name="selectedQuestion1" [ngModel]="selectedQuestion1"   (Onchange)="filterSecurityQuestions($event.target.value,0)">
 <option [value]="0"  disabled selected>Select Secuirty Question1</option>
 <option *ngFor="let securityQuestion of securityQuestions[0]"  [value]="securityQuestion.SecurityQuestionID" >
      {{securityQuestion.Question}}
</option>
 </select>  <br />                       
<div>
<input type="text" class="form-control" id="first_name" name="securityAnswer1" placeholder="Your first security answer">
</div>

filterSecurityQuestions(questionNo: number, securityQtnDropdownNo: number) {
// I want previous value of dropdown here. 
}

Upvotes: 2

Views: 9610

Answers (2)

Analyst
Analyst

Reputation: 911

Ingragistics and other npm libraries provide such functionalities. But you can also do this without using such libraries. Consider the following code

perviousSelectedValue: any = null;

onChange(event) {
if(this.previouseSelectedValue == null) {
  // there is no value selected previously. Considering there is no value selected.
  this.previouseSelectedValue = event
  } else {
    console.log('your previousely selected value was: ', this.previousSelectedValue)
  }
}

This worked for me, Might be helpful for someone else. Thanks

Upvotes: 0

Vega
Vega

Reputation: 28708

You can keep a property which will save the old value, such in bellow example:

HTML

<select #select id="pageSize" [ngModel]="myValue" (ngModelChange)="select.value = onChange($event)"> 
     <option value="1">value1</option> 
     <option value="2">value2</option> 
     <option value="3">value3</option> 
</select>

Typescript

  myValue = 1;
  oldValue=1

  onChange(event) { 
    const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?"); 
    if (response) { 
      this.myValue = event;
      this.oldValue = event;
    }
    else{
      this.myValue = this.oldValue;
    }
    console.log(this.myValue)
    console.log(this.oldValue)
    return this.myValue;
  }

DEMO

Upvotes: 4

Related Questions