show first value (option) of a select tag in angular 4

Question

show first value (option) of a select tag in angular 4

Navigation

#1 by (0 votes)

0

hi I'm doing a form in the dual I have different select tags that have values of cities to which I want to place the first value of options so that when the user chooses the first value of the options label is seen as the first value, the problem is that when I integrate angular the select tag is shown to me in white and I want it to show me the first option.

here the code of my select

<select  [(ngModel)]="ciudad" [ngModelOptions]="{standalone: true}" class="inputforShop" name="ciudad" required   >
                                    <option class="placeholder" value="Quito">Quito</option>
                                    <option class="placeholder" value="Guayaquil">Guayaquil</option>
                                    <option class="placeholder" value="Manta">Manta</option>
                                    <option class="placeholder" value="Portoviejo">Portoviejo</option>
                                    <option class="placeholder" value="Cuenca">Cuenca</option>
                                    <option class="placeholder" value="Machala">Machala</option>
                                    <option class="placeholder" value="Ibarra">Ibarra</option>
                                    <option class="placeholder" value="Ambato">Ambato</option>
                            </select>

How can I show the first option value in my select tag?

html angular

asked by Gerardo Gutiérrez 02.07.2018 в 18:07

source

1 answer

CDONTS.Newmail in Windows server 2016 How to validate the value of a parameter in the routes?

score 0 · Answer 1

Because you are using [(ngModel)]="ciudad" the option that has selected will be ignored. Angular will inject the value of ciudad into the template at all times.

You have several options, the easiest is in the code of your component.ts give the initial value a ciudad :

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {

   let ciudad = 'Quito'; // <= Darle valor inicial a ciudad

   constructor() {}
}

Angular will take that value and inject it into the <select> of your html template.