Select selected option not working for some reason =/

Question

[For some reason the selected select option not showing any value just a blank area only when clicking it it shows the values. ive checked the css files and it seems fine no idea what causes the problem when i remove the [(ngModel)] it works but not getting the values =/

import { Component, OnInit } from '@angular/core';
import { Company } from '../_models/company';
import { CompanyService } from '../_services/company.service';
import { AlertifyService } from '../_services/alertify.service';




@Component({
  selector: 'app-company',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit {
  selectedCompany: Company;
   companies: Company[];




  constructor(private companyService: CompanyService, private alertify: AlertifyService) { }




  ngOnInit() {
    this.loadCompanies();


  }

  async loadCompanies() {
    this.companyService.getCompanies().subscribe((companies: Company[]) => {
      this.companies = companies;

    }, error => {
      this.alertify.error(error);
    });
  }

  // selectedChangeHandler(event: any) {
  //   this.selectedCompany = event.target.value;
  // }

}

<ng-container *ngIf="companies">
 <div  class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label  for="">Select Company</label> 
    <select class="form-control"    [(ngModel)]="selectedCompany"  >
      <option  selected> -- select an option -- </option>

      <option  *ngFor="let value of companies"   [ngValue]="value">{{value.name}}</option>
    </select>
  </div>
</ng-container>





<!--Just a test--->
<!-- <select class="form-control col-lg-8" #selectedValue name="selectedValue" id="selectedValue" [(ngModel)]="company" (ngModelChange)="assignCorporationToManage($event)">
  <option *ngFor="let value of companies" [ngValue]="company">{{value.name}}</option>
</select> -->

<ul *ngIf="selectedCompany" class="list-group list-group-flush">
  <li class="list-group-item">Company name: {{selectedCompany.name}}</li>
  <li class="list-group-item">Company address: {{selectedCompany.address}}</li>
  <li class="list-group-item">Company estimated revenue: {{selectedCompany.estimatedRevenue}}₪</li>
</ul>

Answer 1

I see several issues with your example, so I am going to offer another approach, and explain what I am doing along the way.

In an Angular application, when using two way binding with [(ngModel)] on a select, the initially selected option will always be set to the one that matches the value of ngModel.

In your example, the initial value for selectedCompany is never set, and that is the reason your initial page load displays the menu with nothing selected. You are going to need to set a value onto all of your options, including the first to get this to work.

Now, since you did not provide the structure of your model titled Company, I am going to improvise and assume it contains two elements, name and value. So just remember, you will need to adjust what I have below to match the actual structure of your data.

First, on the option tags in your select in the template, id suggest using the value attribute which we will be populating with strings, instead of ngValue which is can be used to contain an object or a string. You can obtain the object that contains all of the data you need via the change event later.

Let's adjust your template file as follows:

<select class="form-control" [(ngModel)]="selectedCompany" (change)="companyChange($event.target.value)">
      <option [value]="'init'">-- select a company --</option>
      <option  *ngFor="let company of companies" [value]="company.value">{{company.name}}</option>
</select>

Next, in your component file, lets change that property that we're using for two way binding on your select to be typed as a string:

selectedCompany:string;

Next, lets create a new property typed to your model which we will ultimately set to the company selected:

myCompany:Company;

Next, set the initially selected option in your component so that '-- select a company --' will display as the initially selected option:

ngOnInit() {
  this.selectedCompany = 'init';
  this.loadCompanies();
}

And lastly, inside the change event, you can use the find() method to obtain the complete set of data that you need:

companyChange(value) {
 this.myCompany = this.companies.find(element => element.value === value);
 console.log("User selected the company:", this.myCompany);
}