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.

Shohel · Accepted Answer · 2019-08-05 04:56:15Z

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;  
}

answered Aug 5, 2019 at 4:56

Shohel

3,9645 gold badges41 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

molikh · Accepted Answer · 2019-08-05 04:39:50Z

You can add it to you array ( items ).

var items = [1, 2, 3];
items.unshift(-1);
['Add New' , 1 ,2 3]

and you can run a function in your code by adding (click) ="doSomething()"

<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" (click)="doSomething(item)">{{item}}</a>
     </div>
  </div>

then in the function:

function doSomthing(item){
  if(item = -1){ 
    openPopup();
  }
}

Collectives™ on Stack Overflow

Add custom control to angular select dropdown control

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related