reusable generic select component

Question

I am trying to create a reusable generic select component and use it in parent component, kinda stuck, whatever I do gives million errors. what am I doing wrong? how to complete the code?

Select Component

export class Option
{
    constructor(id:string, name:string) {
        this.id=id;
        this.name=name;
    }

    id:string;
    name:string;
}

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss']
})

export class SelectComponent implements OnInit {

  @Input()
  options!: Option[]; //any;
  selectedOption: Option;

  constructor() {
    this.selectedOption = this.options[0];
   }

  ngOnInit(): void {}

}

Select Html

<select class="form-select" aria-label="Please select">
    <option *ngFor="let o of options" [value]="o.id">{{ o.name }} 
    </option>
</select>

Parent Component

export class ParentComponent implements OnInit {
  @ViewChild('selectProvider') selectProvider: SelectComponent;
  options: Option[];

  constructor(selectProvider: ElementRef) {

    this.options = [
      new Option("A","A"),
      new Option("B","B")
    ];

  }

Parent Html

<app-select [options]="options" #selectProvider></app-select>

Answer 1

First of all, make Option an interface.

export interface Option {
  id: string;
  name: string;
}

And simply pass Option objects in your arrays like this:

this.options = [
  { id: 'A', name: 'A' }, 
  ... 
];

Secondly, if you want to create a reusable component that you can have control of its value, take a look at ControlValueAccessor on YouTube. There's a lot to cover so it's better to check on a video.