title: Use Bootstrap 4 dropdown with angular 4
body: <p>I wanted to use custom styling in HTML selection list. Since HTML  does not allow (very minimal styling) to put custom styles due to some limitations. I used Bootstap 4 dropdown which mocks the HTML selection list behavior. I was able to add custom style by doing it. </p>
  
  <p>Now I am having problem in selecting an item from dropdown and sending it back to angular component using this approach.</p>
  
  <p>Here is my initial solution using HTML Selection list. I was able to bind color name with angular model using it.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
     &lt;div class="input-group"&gt;
        &lt;div class="input-group-prepend"&gt;
           &lt;strong class="input-group-text" id="basic-addon1"&gt;Select Color * &amp;nbsp;&amp;nbsp;&lt;/strong&gt;
        &lt;/div&gt;
        &lt;select class="form-control s-styled" [(ngModel)]="productToEdit.colorOptionId" (change)="onOptionChange($event.target.value, optionGroupCode.Color)"&gt;
        &lt;option&gt;Please Select Color&lt;/option&gt;
        &lt;option *ngFor="let color of colorOptions"&gt;{{color.optionName}}
        &lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the solution using Bootstrap 4 dropdown. I am able to render dropdown neatly. But I am having problems in binding the selected color name with model. 
  I want to use the selected color name inside my model as shown in image below.</p>
  
  <pre><code>&lt;div class="form-group" *ngIf="productToEdit.parentProductId &gt; 0"&gt;
     &lt;div class="input-group"&gt;
        &lt;div class="input-group-prepend"&gt;
           &lt;strong class="input-group-text" id="basic-addon1"&gt;Select Color * &amp;nbsp;&amp;nbsp;&lt;/strong&gt;
        &lt;/div&gt;
        &lt;span type="button" class="form-control" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" #colorSpan&gt;Choose Color
        &lt;/span&gt;
        &lt;div class="dropdown-menu dropdown-menu-right" style="max-height: 1000%; overflow-y: auto; overflow-x: hidden;" aria-labelledby="dropdownMenuButton"&gt;
           &lt;div *ngFor="let color of colorOptions"&gt;
              &lt;div class="container"&gt;
                 &lt;div class="row"&gt;
                    &lt;div class="dropdown-item text-muted"&gt;
                       &lt;span class="circle {{color.optionName.replace(' ' , '-')}}" style="margin-left:3px"&gt;&lt;/span&gt; &amp;nbsp;
                       &lt;span class="text-muted small lowercase" style="align-items:center;"&gt;{{color.optionName}}&lt;/span&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/oljpk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oljpk.png" alt="enter image description here"></a></p>