How to change the dropdown value, if we have more records without having break using angular8

Question

I have used Angular8 in my project, here if i have 2-3 records then Previous and Next works fine, but if i have more records, then when i click on previous/next, then it break the code and struck in the middle. Can anyone help, how to solve this issue. I have attached working demo of my code.

TS:

  public changeDropdown(value) {
    const entry = this.dropdownValue.findIndex(x => x.noteId === parseInt(value));
    this.selectedDropdownValue = this.dropdownValue[entry].noteId;
  }

  public previousNextValue(value) {
      let previousValue = this.selectedDropdownValue;
      previousValue = value ? ++previousValue : --previousValue;
      this.changeDropdown(previousValue);
  } 

HTML:

 <div class="card-footer text-right">
                    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(false)"
                    [disabled]="selectedDropdownValue<=1"><i class="fas fa-chevron-left"></i>
                        Previous</button> 
                    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(true)"
                    [disabled]="selectedDropdownValue==dropdownValue.length">Next <i class="fas fa-chevron-right"></i></button>
                </div>

DEMO

Answer 1

The problem is that you are looking for an ID that doesnt exist, and also you are using the same Variable for value and for The index, wich is causing troubles, you have to create another variable for setting the previousValue. Here's an example.

selectedDropdownValue:number = 0;
  globalPreviousValue: number = 0;
  public dropdownValue = [
    {"noteId":1,"noteTypeId":1,"noteTypeName":null,"noteSubject":"subject -1","createdDate":"2020-08-07T15:21:48.71","createdBy":"Admin","noteText":null,"dropdownSubject":"08/07/2020 Admin subject -1"},{"noteId":2,"noteTypeId":2,"noteTypeName":null,"noteSubject":"subject -2 test","createdDate":"2020-08-07T15:25:38.553","createdBy":"Admin","noteText":null,"dropdownSubject":"08/07/2020 Admin subject -2 test"},{"noteId":3,"noteTypeId":2,"noteTypeName":null,"noteSubject":"subject -3 test","createdDate":"2020-08-11T11:26:36.007","createdBy":"Admin","noteText":null,"dropdownSubject":"08/11/2020 Admin subject -3 test"},{"noteId":10,"noteTypeId":3,"noteTypeName":null,"noteSubject":"test","createdDate":"2020-08-12T11:50:14.653","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin test"},{"noteId":11,"noteTypeId":5,"noteTypeName":null,"noteSubject":"tested","createdDate":"2020-08-12T14:36:43.41","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin tested"},
    {"noteId":12,"noteTypeId":135,"noteTypeName":"Email sent to Agent","noteSubject":"test","createdDate":"2020-08-12T17:25:15.71","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin test"},
    {"noteId":13,"noteTypeId":136,"noteTypeName":"Fax to Agent","noteSubject":"tested","createdDate":"2020-08-12T17:29:59.97","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin tested"}]
               
  public changeDropdown(value) {
    this.globalPreviousValue = value
    this.selectedDropdownValue = this.dropdownValue[value].noteId;
  }

  public previousNextValue(value) {
      let previousValue = this.globalPreviousValue;
      previousValue = value ? ++previousValue : --previousValue;
      this.changeDropdown(previousValue);
  } 

Also Change the Validation in your HTML in order work as desired.

<div class="card-footer text-right">
                    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(false)"
                    [disabled]="globalPreviousValue<=1"><i class="fas fa-chevron-left"></i>
                        Previous</button> 
                    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(true)"
                    [disabled]="globalPreviousValue==dropdownValue.length-1">Next <i class="fas fa-chevron-right"></i></button>
                </div>

Working Demo

Answer 2

You need to refactor your logic from value to index of array like

export class AppComponent {
  selectedDropdownValue:number = 0;
  selectedIndex: number = -1;
  public dropdownValue = []; // data
               
  public previousNextValue(selectedIndex) {
    this.selectedIndex = selectedIndex;
    this.selectedDropdownValue = this.dropdownValue[selectedIndex].noteId;
  }
  public changeDropdown(selectedDropdownValue){
    this.selectedDropdownValue = selectedDropdownValue;
    this.selectedIndex = this.dropdownValue.findIndex(x => x.noteId === parseInt(selectedDropdownValue));

  }
}

And your view for next and previous will be like

<select class="custom-select w-100" name="noteTypeId" (change)="changeDropdown($event.target.value)" [value]="selectedDropdownValue">
    <option value="0" selected disabled>Select Note Details</option>
    <option *ngFor="let notesItem of dropdownValue" [value]="notesItem.noteId">
        {{notesItem.dropdownSubject}}
    </option>
</select>

<div class="card-footer text-right">
    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(selectedIndex - 1)"
    [disabled]="selectedIndex < 1"><i class="fas fa-chevron-left"></i>
        Previous</button> 
    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(selectedIndex + 1)"
    [disabled]="selectedIndex >= dropdownValue.length - 1">Next <i class="fas fa-chevron-right"></i></button>
</div>

DEMO