"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

What is the method to acquire the firestore reference type in TypeScript?

Encountered a 404 error while using a MEAN stack application

Outputting double columns with Typescript Sequelize associations

Angular Service Worker - Resolving Font Awesome Cross-Origin Resource Sharing

Transforming strings of HTML into objects in the DocX format

Having trouble accessing the product details in my Angular app hosted on Azure

Utilize Angular 4 to dynamically load templates within a single component

Updates to Providers in the latest release of Angular 2

Fixing errors with observables in an Angular 2 project using Rx

Creating an async function in TypeScript to retrieve the coordinates of a particular location is a useful way to streamline the

Exploring the capabilities of Typescript arrays by implementing a forEach loop in conjunction with the

Monitoring User Interactions for Maintaining Session Foresight Plan utilizing RxJS

Tips for sending an optional parameter to @Directives in Angular 2 using TypeScript

A guide to creating a TypeScript redux middleware class

What is the process of incorporating a JavaScript node module into TypeScript?

Is there a way to bring in both a variable and a type from a single file in Typescript?

Problem with opening the keyboard feature in an Ionic app

Can the Angular CLI be installed without using the command prompt?

Excluding node modules from Webpack TerserPlugin

The improper utilization or replacement of Jest mock in an Angular standalone component's unit test is causing issues