select dropdown value default of first index of array angular 7 safari

Question

I am using Safari and try to make the array first index as default option in the select dropddown but somehow it is not showing any option by default. i do not want to handle that on the code side as some values can come from services.

I tried selected="selected" but no help.

Is there any way we can make the option default directly? or manually?

below is my code and stackblitz.

https://stackblitz.com/edit/angular-7aqzj2

 @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor( public form: FormBuilder ) {} name = 'Angular 5'; selectedCountry: any; public dropdown: FormGroup; countrydrodown = []; cities = {}; places = {}; texts = {}; countriesValue = [{ 'id': 1, 'name': 'France' }, { 'id': 2, 'name': 'Germany' }, { 'id': 3, 'name': 'Italy', }] countries = [{ 'id': 1, 'name': 'France', 'cities': ['Paris'], 'places': [ 'effil tower', 'new discover' ], 'texts': ['a'] }, { 'id': 2, 'name': 'Germany', 'cities': ['Hamburg'], 'places': [], 'texts': ['b'] }, { 'id': 3, 'name': 'Italy', 'cities': ['Roma', 'Milan', 'Napoli'], 'places': [ 'effil tower', 'new discover' ], 'texts': ['c'] }, ]; ngOnInit() { this.onChange(1); this.serviceGetCountries(); this.dropdown = new FormGroup({ country: new FormControl(), city: new FormControl(), place: new FormControl(), text: new FormControl() }); } getCountries() { return Observable.of(this.countriesValue); } serviceGetCountries() { this.getCountries().subscribe(res => { this.countrydrodown = res; console.log(this.countrydrodown); }); } onChange(deviceValue) { console.log(deviceValue); this.getValues(deviceValue).subscribe(res => { console.log(res); this.cities = res.filter(x => x.id == deviceValue)[0].cities; this.places = this.countries.filter(x => x.id == deviceValue)[0].places; this.texts = this.countries.filter(x => x.id == deviceValue)[0].texts; console.log(Object.keys(this.places)); console.log(this.cities); }); } getValues(val) { return Observable.of(this.countries); } }

 <div [formGroup]="dropdown"> <div class="col"> <div class="row"> <select formControlName="country" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)"> <option selected *ngFor="let country of countrydrodown" [value]="country.id" selected="selected">{{country.name}}</option> </select> </div> <div *ngIf="cities?.length > 0" class="row"> <div style=" padding-top: 0.5em; "> <select formControlName="city" id="sel1" class=""> <option *ngFor="let city of cities" [ngValue]="city" selected="selected">{{city}}</option> </select> </div> </div> <div *ngIf="places?.length > 0" class="row"> <div style=" padding-top: 1em; "> <label *ngFor="let place of places"> <input formControlName="place" type="radio">{{place}} </label> </div> </div> <div *ngIf="texts?.length > 0" class="row"> <div style=" padding-top: 1em; "> <label *ngFor="let text of texts">{{text}} : <input formControlName="text" type="text"> </label> </div> </div> </div> </div>

Answer 1

Here is my solution

On your template

<select formControlName="country" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
       <option value = "default" selected> Select Cities </option>
       <option *ngFor="let country of countrydrodown" [value]="country.id">{{country.name}}</option>
</select>

<select formControlName="city" id="sel1" class="">
       <option value = "default" selected> Select Cities </option>
       <option *ngFor="let city of cities" [ngValue]="city">{{city}}</option>
</select>

On your Typescript, add this:

public defaultSelect = "default";

I hope this help

[EDIT]

When you declare property defaultSelect = "default" , the value inside the <option> will be set to "default" and that first option is selected . The Select Cities in the drop down will always be selected and displayed first

Answer 2

You need to set the default value in your formGroup like :

this.dropdown = this.form.group({
    country: [1, Validators.required], //1 is the default value 
    ... (your others FormControl)
});

And in the view just do :

          <option
            *ngFor="let option of options"
            [value]="option.value"
            [innerHTML]="option.label"></option>