Kalpesh300

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-custom-dropdown',
   templateUrl: './custom-dropdown.component.html',
   styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
   
   options: string[];
  

Kalpesh300

<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">

Kalpesh300

export class CustomDropdownComponent implements OnInit,
  ControlValueAccessor {
   
  options: string[];
  selectedOption: string;

  constructor() { }
  
  ngOnInit() {
    this.options = [

Kalpesh300

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 {
  

Kalpesh300

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

Kalpesh300

export class CustomDropdownComponent implements OnInit,
  ControlValueAccessor {
   
  options: string[];
  selectedOption: string;

  constructor() { }
  
  ngOnInit() {
    this.options = [

Kalpesh300

<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

Kalpesh300

export class CustomDropdownComponent implements OnInit,
  ControlValueAccessor {
   
  options: string[];
  selectedOption: string;

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

  constructor() { }
  

Kalpesh300

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),

Kalpesh300

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