Custom Dropdown Control

app.component.html

<app-custom-dropdown [formControl]="dropdownControl"></app-custom-dropdown>

app.component.ts

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'dropdown-demo';

  dropdownControl = new FormControl(null, Validators.required);

}

custom-dropdown.component.html

<div class="btn-group" dropdown>
  <button id="button-basic" dropdownToggle type="button" 
    class="btn btn-primary dropdown-toggle"
    aria-controls="dropdown-basic">
      {{ selectedOption }} <span class="caret"></span>
  </button>
  
  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" 
      role="menu" aria-labelledby="button-basic">
    <li role="menuitem" *ngFor="let option of options" (click)="changeSelectedOption(option)">
      <span class="dropdown-item"> {{ option }} </span>
    </li>
  </ul>
</div>

custom-dropdown.component.ts

import { Component, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomDropdownComponent),
    multi: true,
  }]
})
export class CustomDropdownComponent implements OnInit, ControlValueAccessor {

  options: string[];

  selectedOption: string;

  onChange: (_: any) => {};

  constructor() { }

  ngOnInit() {

    this.options = [
      'option 1',
      'option 2',
      'option 3',
    ];

    this.selectedOption = this.options[0];

  }


  writeValue(value: string) {
    this.selectedOption = value;
  }

  registerOnChange(fn: (_: any) => {}) {
    this.onChange = fn;
  }

  changeSelectedOption(option: string) {
    this.selectedOption = option;
    this.onChange(option);
  }

  registerOnTouched() { }


}