Add custom control to angular select dropdown control

Question

I want to add (+) Add New option to angular dropdown.

Like

• (+) Add New
• Item 1
• Item 2
• Item 3

when I select AddNew, I want to pop-up a new window. ( This part is ok by my code )

This is how I tried

<div class="dropdown">
  <a class="default-dropdown dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Please Select
  </a>
  <div class="dropdown-menu default-dropdown-items">
    <a class="dropdown-item add-link" data-toggle="modal" data-target="#addNewItem"><i class="fa fa-plus-circle"></i>
      New Item</a>
    <div *ngFor="let item of items">
      <a class="dropdown-item">{{item.name}}</a>
    </div>
  </div>
</div>

My code does work for pop-up, but I also want to pass the value of the selected item to typescript. I want to get selected Item's value.

Answer 1

There is no proper way to select dropdown of bootstrap. You need to add something custom behavior which will select the value. The following code snippet would be helpful to you.

<div class="dropdown">
  <a class="default-dropdown dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" #itemSelect>
    Please Select
  </a>
  <div class="dropdown-menu default-dropdown-items">
    <a class="dropdown-item add-link" data-toggle="modal" data-target="#addNewItem"><i class="fa fa-plus-circle"></i>
      New Item</a>
    <div *ngFor="let item of items">
      <a class="dropdown-item" (click)="onSelected(item); itemSelect.innerText = item.name;">{{item.name}}</a>
    </div>
  </div>
</div>

onSelected(item: Item): void {
  this.selectedItem = item;  
}