Retain the Previously Selected Option in Angular 2 Dropdown

Question

Retain the Previously Selected Option in Angular 2 Dropdown

Looking for assistance with implementing a simple HTML select dropdown in Angular2 (TS) using the code below:

<select id="pageSize" (change)="onPageSizeChanged($event, pagination.pageSize)">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>

The variable pagination.pageSize stores the previously selected value. When this changes, I want to prompt the user with a dialog box and wait for their response. If they click cancel, I need to revert back to the previous selection.

onPageSizeChanged(event, oldValue) {
  const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
  if (response) {
    //... some code ...
  } else {
    //... here I want to revert the selection to previously selected option
  }
}

I have tried various approaches but haven't had any success yet.

Please assist, as I am struggling with what should be a straightforward task. Perhaps I am missing something obvious.

Attempted Solution #1 - Not Working (Plunk - https://embed.plnkr.co/ILi12O/)

<select id="pageSize" [ngModel]="pageSize" (ngModelChange)="onPageSizeChanged($event, pagination.pageSize)"> 
  <option value="10">10</option> 
  <option value="20">20</option> 
  <option value="50">50</option> 
</select> 

onPageSizeChanged(event, oldValue) { 
  const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?"); 
  if (response) { //go ahead so something } 
  else { this.pageSize = oldValue; }  
}

javascript angular typescript select dropdown

Answer 1

Answer №1

To monitor model changes, include ngModelChange. Confirm the change in the dialog for the next step or revert to the previous value. Using a local template variable (#select) can simplify tracking. I have updated your code based on your plunker:

HTML:

 <select #select id="pageSize" [ngModel]="pageSize" (ngModelChange)="select.value = onPageSizeChanged($event)">

TypeScript:

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

demo

Answer 2

To monitor model changes, include ngModelChange. Confirm the change in the dialog for the next step or revert to the previous value. Using a local template variable (#select) can simplify tracking. I have updated your code based on your plunker:

HTML:

 <select #select id="pageSize" [ngModel]="pageSize" (ngModelChange)="select.value = onPageSizeChanged($event)">

TypeScript:

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

demo

Answer 3

Answer №2

https://example.com/code-sample

A helpful tip for your component.html file...

Try implementing a template reference variable #pageSize on your select element

and on (change), assign the value of that variable (pageSize.value) to your onChangeSize method which we'll define shortly. Pass the pageSize.value to this onChangeSize method like this: (change) = "pageSize.value = onChangeSize(pageSize.value)

this will result in...

<select id="pageSize" #pageSize 
(change)="pageSize.value = onChangeSize(pageSize.value)">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>

In your component.ts file, create a method that takes the value & after user confirmation, either return the input or default value.

export class MathComponent implements OnInit {
  defaultInput: number = 10;
  userInput: number = this.defaultInput;

  constructor() { }

  ngOnInit() {
  }

  onChangeSize(pageSize: HTMLSelectElement) {
    const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
    if (response) {
      return pageSize;
    } else {
      return this.defaultInput;
    }
  }
}

https://example.com/code-sample

Answer 4

https://example.com/code-sample

A helpful tip for your component.html file...

Try implementing a template reference variable #pageSize on your select element

and on (change), assign the value of that variable (pageSize.value) to your onChangeSize method which we'll define shortly. Pass the pageSize.value to this onChangeSize method like this: (change) = "pageSize.value = onChangeSize(pageSize.value)

this will result in...

<select id="pageSize" #pageSize 
(change)="pageSize.value = onChangeSize(pageSize.value)">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>

In your component.ts file, create a method that takes the value & after user confirmation, either return the input or default value.

export class MathComponent implements OnInit {
  defaultInput: number = 10;
  userInput: number = this.defaultInput;

  constructor() { }

  ngOnInit() {
  }

  onChangeSize(pageSize: HTMLSelectElement) {
    const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
    if (response) {
      return pageSize;
    } else {
      return this.defaultInput;
    }
  }
}

https://example.com/code-sample

Answer 5

Answer №3

When dealing with Select controls that have asynchronous code in the (ngModelChange) method (such as async/await, Promise, rxjs Observable), an alternative solution can be used for Angular 6 and below.

      <select
        id="{{ user.emailAddress }}"
        class="form-control role-select"
        aria-label="Dropdown"
        [disabled]="busy"
        [(ngModel)]="user.role"
        (ngModelChange)="editUserRole(user)"
      >
        <option *ngFor="let role of (roles | async)" [value]="role">
          {{ role }}
        </option>
      </select>

In the controller:

public async editUserRole(user: IUser) {
    if (user.role === SubscriptionUserRole.DATA_DEFAULT && !this._hasAtLeastOneOtherAdmin(user)) {
      // To workaround the delay in updating HTML elements pre Angular V6, a setTimeout is utilized.
      // This may no longer be necessary in Angular V6.
      // zone.js and ngZone handle async operations for UI updates, avoiding the need for app.tick.
      setTimeout(() => {
        user.role = SubscriptionUserRole.DATA_ADMIN;
      }, 0);
      this.errorMessage = 'At least one user should be DataAdmin';
      return;
    }
    // Proceed with change operation such as database update here.
}

In certain cases, the delayed update could potentially cause issues.

The delay might become obsolete in Angular 6+ as FormControl now gets updated before ngModelChangeCall.

Answer 6

When dealing with Select controls that have asynchronous code in the (ngModelChange) method (such as async/await, Promise, rxjs Observable), an alternative solution can be used for Angular 6 and below.

      <select
        id="{{ user.emailAddress }}"
        class="form-control role-select"
        aria-label="Dropdown"
        [disabled]="busy"
        [(ngModel)]="user.role"
        (ngModelChange)="editUserRole(user)"
      >
        <option *ngFor="let role of (roles | async)" [value]="role">
          {{ role }}
        </option>
      </select>

In the controller:

public async editUserRole(user: IUser) {
    if (user.role === SubscriptionUserRole.DATA_DEFAULT && !this._hasAtLeastOneOtherAdmin(user)) {
      // To workaround the delay in updating HTML elements pre Angular V6, a setTimeout is utilized.
      // This may no longer be necessary in Angular V6.
      // zone.js and ngZone handle async operations for UI updates, avoiding the need for app.tick.
      setTimeout(() => {
        user.role = SubscriptionUserRole.DATA_ADMIN;
      }, 0);
      this.errorMessage = 'At least one user should be DataAdmin';
      return;
    }
    // Proceed with change operation such as database update here.
}

In certain cases, the delayed update could potentially cause issues.

The delay might become obsolete in Angular 6+ as FormControl now gets updated before ngModelChangeCall.

Retain the Previously Selected Option in Angular 2 Dropdown

Answer №1

Answer №2

Answer №3

Similar questions

Defining a property of an object within a Vue Class

Tips for creating a Vuex mutation without using asynchronous promises

Simulate a complete class with its constructor, instance methods, and static functions

Combine two sets of JavaScript objects based on their positions using Underscore.js

Receiving warnings during npm installation and encountering difficulties with fixing issues using npm audit fix

Laravel has not been properly initialized

A simple guide on passing a variable from Node.js to the view

Issues with rotating the camera in three.js are causing functionality problems

Removing Multiple Object Properties in React: A Step-by-Step Guide

What is the best way to adjust the camera position in three.js while keeping it from rotating?

Fetching data from MongoDB, loading over 3000 entries and implementing pagination

What is the best way to ensure the header and sidebar stay fixed while allowing the rest of the page content to flow in

Module '@tanstack/react-table' cannot be located even though it has been successfully installed

Tips for retrieving a value from a callback function?

How can the datetime value of the Apex Charts datapoint be shown in the tooltip?

I'm puzzled as to why the banner text for my three images in the slider is only displaying on one of the images, all crammed together

How can data be transferred between controllers in Angular 2 without using URL parameters or the $state.go() function?

Generate a blank image using the canvas.toDataURL() method

Compiling errors arise due to TypeScript 2.4 Generic Inference

Compatibility with IE9: Using jQuery to send an AJAX POST request