title: select dropdown value default of first index of array angular 7 safari
body: <p>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.</p>
  
  <p>I tried selected="selected" but no help.</p>
  
  <p>Is there any way we can make the option default directly? or manually?</p>
  
  <p>below is my code and stackblitz.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-7aqzj2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-7aqzj2</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@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 =&gt; {
              this.countrydrodown = res;
              console.log(this.countrydrodown);
          });
      }
  
      onChange(deviceValue) {
          console.log(deviceValue);
          this.getValues(deviceValue).subscribe(res =&gt; {
              console.log(res);
              this.cities = res.filter(x =&gt; x.id == deviceValue)[0].cities;
              this.places = this.countries.filter(x =&gt; x.id == deviceValue)[0].places;
              this.texts = this.countries.filter(x =&gt; x.id == deviceValue)[0].texts;
              console.log(Object.keys(this.places));
              console.log(this.cities);
          });
      }
  
      getValues(val) {
          return Observable.of(this.countries);
  
  
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div [formGroup]="dropdown"&gt;
      &lt;div class="col"&gt;
          &lt;div class="row"&gt;
              &lt;select formControlName="country" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)"&gt;
                  &lt;option selected *ngFor="let country of countrydrodown" [value]="country.id" selected="selected"&gt;{{country.name}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div *ngIf="cities?.length &gt; 0" class="row"&gt;
              &lt;div style=" padding-top: 0.5em; "&gt;
                  &lt;select formControlName="city" id="sel1" class=""&gt;
                      &lt;option *ngFor="let city of cities" [ngValue]="city" selected="selected"&gt;{{city}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf="places?.length &gt; 0" class="row"&gt;
              &lt;div style=" padding-top: 1em; "&gt;
                  &lt;label *ngFor="let place of places"&gt;
                      &lt;input formControlName="place" type="radio"&gt;{{place}}
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf="texts?.length &gt; 0" class="row"&gt;
              &lt;div style=" padding-top: 1em; "&gt;
                  &lt;label *ngFor="let text of texts"&gt;{{text}} :
                      &lt;input formControlName="text" type="text"&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>