Problems with angular select 5

Question

Problems with angular select 5

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have this page html

<div class="row">

<div class="col s12 m6">
    <div class="card">
      <div class="card-content black-text">  
             <h6><strong>Server</strong></h6>             
             <select id="serverSelectServer" [(ngModel)]="opcionSeleccionado" (change)="onSelectServer()">
               <option value="All">All servers</option>
               <option *ngFor="let xserver of serversCodifiers" value="{{ xserver.name }}">{{ xserver.name }}</option>
             </select>
      </div>
    </div>
  </div>

And this is the component.ts

onSelectServer(){
console.log("changed");
}

My problem is that I need to get the value of what is selected in the select, but for some strange reason the event does not run. I would greatly appreciate your help, thank you very much in advance

javascript angularjs angular5

asked by Escarlet Escoto 07.05.2018 в 02:34

source

2 answers

good night, error in swift error in row path of a reader () inside another reader ()

score 0 · Answer 1

In the select you will have to put:

[(ngModel)]="**variable**"

And in the controller you'll have to declare the variable . This variable will get the value of value of the option of select .

I hope it's helpful

score 0 · Answer 2

The correct way to obtain the value at the time the change is made is to use the decorator Output() of the ngModel, (ngModelChange) in the following way in the template (html):

<select [(ngModel)]="opcionSeleccionado" (ngModelChange)="onSelectServer($event)">

and you can capture the change in the component like this:

onSelectServer(opcion) {
   console.log(opcion);
   //opcion es el valor emitido por el select en el evento de cambio(change)
}