-1

I'm trying to update the value in select in Angular 8. I found that I can use:

$('#selectSeccion').val("SeccionOption");

This select is the next one:

<select name="seccion" class="form-control" id = "selectSeccion">
   <option *ngFor="let seccion of seccion" [ngValue]="seccion">{{seccion.seccion}}</option>
</select>

jQuery code is not working when I use the select with Angular, only works when select is normal html like the next one:

<select class="form-control" id = "prueba">
    <option value = ""></option>
    <option value = "other">other</option>
</select>

How can I update the value on the "ng" select?

jorge170909
  • 1
  • 1
  • 2
  • Does this answer your question? [Binding select element to object in Angular](https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular) – Igor Feb 27 '20 at 21:57
  • Do not use jquery for this. Read through the documentation or follow the tour of heroes tutorial so you better understand the basics of angular. – Igor Feb 27 '20 at 21:58
  • @Igor I'm not an expert using Angular, probably binding is the answer, however, the answer you pointed is not updating the select, it updates a value based on changes in select but select is updated manually, thanks anyways – jorge170909 Feb 27 '20 at 22:29

2 Answers2

0

I would not recommend using jQuery along with Angular. you can read more about it here: http://www.learnangularjs.net/using-jquery-with-angular.php

The simplest way

component.html:

<select [(ngModel)]="selectModel" (change)="selectionChange()">
    <option [value]="seccion" *ngFor="let seccion of seccions"> {{seccion}}</option>
</select>

component.ts:

selectionChange() {
    console.log(this.selectModel)
}

changing the selectModel parameter will trigger the select to change as well.

Ben Ari Kutai
  • 509
  • 3
  • 9
  • The value in select is updated from another place, I have to updated when a (wheel) method detects a change in another field therefore I can't do it in (change). It should work in the next way: I choose initially an option manually, I scroll my main option (it deletes the value in select) and when I scroll back I'd like to see the option in select I chose manually before the first scroll. The value in select should appear and disappear when I scroll over the main option. Thanks! – jorge170909 Feb 27 '20 at 22:42
  • you can bind a wheel event that changes the selectModel parameter – Ben Ari Kutai Feb 28 '20 at 09:19
0

Based on previous recommendation I can updated using Angular, which always was the best way by the way. No jQuery. I have to change my select to the next one

<select name="seccion" class="form-control" id = "selectSeccion" [(ngModel)]="value" #ctrl="ngModel">
    <option *ngFor="let seccion of seccion" >{{seccion.seccion}}</option>
</select>

Adding this on select tag > [(ngModel)]="value" #ctrl="ngModel" and updating the ts file with this lines: value : string = '';

updatingFunction(){ this.value = "SeccionUpdated"; }

I left it if there someone needs it

jorge170909
  • 1
  • 1
  • 2