Binding select element to object in Angular

Question

I\'d like to bind a select element to a list of objects -- which is easy enough:

@Component({
   selector: \'myApp\',
   template: `
My Application&         


        

Answer 1

Create another getter for selected item

  
    {{c.name}}
  

  
Selected Country: {{selectedCountry?.name}}

In ts :

get selectedCountry(){
  let countryId = this.countryForm.controls.country.value;
  let selected = this.countries.find(c=> c.id == countryId);
  return selected;
}