"Techniques for extracting both the previous and current selections from a dropdown menu in Angular 2

Question

"Techniques for extracting both the previous and current selections from a dropdown menu in Angular 2

How can I retrieve the previous value of a dropdown before selection using the OnChange 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) {
// Need to access previous value of dropdown here. 
}

angular typescript drop-down-menu

Answer 1

Answer №1

If you want to maintain the old value of a property, you can create a separate variable to store it as shown in the example below:

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

Answer 2

If you want to maintain the old value of a property, you can create a separate variable to store it as shown in the example below:

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

Answer 3

Answer №2

Using Ingragistics and other npm libraries can provide these functionalities, however, it is also possible to achieve the same result without relying on external libraries. Take a look at the code snippet below:

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 solution worked for me and may be useful for others as well. Thank you.

Answer 4

Using Ingragistics and other npm libraries can provide these functionalities, however, it is also possible to achieve the same result without relying on external libraries. Take a look at the code snippet below:

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 solution worked for me and may be useful for others as well. Thank you.

"Techniques for extracting both the previous and current selections from a dropdown menu in Angular 2

Answer №1

Answer №2

Similar questions

Deleting button on Angular 4's CKEditor

Having trouble showing table data in Angular

What is the correct way to implement Vue.use() with TypeScript?

Encountering an issue when trying to upload a photo from Angular 8 to Laravel: receiving a "Call to a member function extension() on null" error

Developing an array in Angular on an Android device is proving to be a sluggish

Automatic Formatting of Typescript in SublimeText

There seems to be an issue with executing an imported function from a .ts file within a TSX file in NextJs, resulting

Fixing the issue of 'Unrecognized character < in JSON at position 0 at JSON.parse'

Retrieve values from DynamoDB in their original Number or String formats directly

Encountering a bug in Angular 10 while attempting to assign a value from

Retrieve GPS data source details using Angular 2

What is the best way to upload a photo taken with the Android camera using FormData in Ionic/Angular?

Enhanced assistance for optional chaining operator available in Visual Studio Code

Tips for showing more rows by clicking an icon within an Angular 2 table

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

Best practices for managing backend errors with Next.js 14

What is the best way to utilize a single component for validating two other components?

Warning: Angular Compilation Issue - Deprecation Advisory

The process of ensuring a component is able to watch for the router even when it is not within the router

The TypeScript Promise error codes TS2304 and TS2529 are causing confusion among