CODEWITHSUNDEEP
angularangular8
Lovika
Lovika

Reputation: 617

Old value of the event in ngModelChange when ngModel has the default value set

I am trying to get the ngModelChange old value. I want to detect if the dropdown value has changed inside the component to call the function repeatedly.

HTML:

        <select id = "translation" (ngModelChange)="getTranslationOnChange($event)" [(ngModel)]="selectedDevice" class="form-control float-right col-md-3">
            <option [ngValue]="language.id" *ngFor="let language of languages">{{language.name}}</option>
        </select>

the value of selectedDevice is set to "en" by default as I want to set "en" as default in the dropdown. How do I get the old value of the dropdown as well the new value?

Upvotes: 0

Views: 1919

Answers (2)

Rounak Snehasis
Rounak Snehasis

Reputation: 91

I have tried to do some workaround to get the value in the getTranslationOnChange(). Not sure but may be this can serve the purpose.

HTML:-

<select id = "translation" (click) = "getVal(selectedDevice)" (ngModelChange)="getTranslationOnChange($event)" [(ngModel)]="selectedDevice" class="form-control float-right col-md-3">
            <option [ngValue]="language" *ngFor="let language of languages">{{language.name}}</option>
        </select>

TS:-

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.html'
})
export class AppComponent implements OnInit {
public languages = [{'id':1,'name':'en'},{'id':2,'name':'pt'},{'id':3,'name':'es'}];
public counter = 0;
public oldval;
public selectedDevice;
ngOnInit() {
  this.selectedDevice = this.languages[0];
}
getTranslationOnChange($event){
  console.log("new Value=",$event," +old value= ",this.oldval);
  this.counter++;
}
getVal(event){
  if(!this.counter) {
    this.oldval = event.name;
  }
  this.counter = 0;
}
}

I hope it helps. Thanks

Upvotes: 0

Ling Vu
Ling Vu

Reputation: 5181

Unfortunately this is currently not possible.

I had a similar problem here: Mat select - Get old value of selectionChange

Another workaround using Subject: How to obtain previous and new value from Angular mat-select?

You can handle previous and current value by pushing the value into a Subject, and observe this Subject using the pairwise operator. This operator will emit the previous and the current value of the stream. (https://www.learnrxjs.io/operators/combination/pairwise.html)

Example:


export class YOU_COMPONENT{

  private data: Subject<any> = new Subject<any>();

  checkTitle(value){
    this.data.next(value);
  }

  observeDataChange():Observable<[]>{
     // this return an observable of an array that contains [previous, current] data
     return this.data.asObservable().pipe(pairwise());
  }

}

In the end I took the workaround by having a value with the prefix old in its name to have it. There is another workaround that you find in my linked question.

I hope that it at least give you some inspirations. Sorry about that.

Upvotes: 2

Related Questions