We Keep Coding

How to enable/disable dropdown with angular2?

Hope it is not a duplicate question. I have some layout which is as follows,
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
How to enable dropdown on button click with angular?

To enable/disable
<div class="btn-group">
<button [attr.disabled]="dropdownDisabled ? true : null"
type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
<button (click)="dropdownDisabled = !dropdownDisabled">toggle</button>
to open/close
i assume that you're using bootstrap css style
<div class="btn-group dropdown" [class.open]="dropdownOpened">
<button (click)="dropdownOpened = !dropdownOpened"
type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
[attr.aria-expanded]="dropdownOpened ? 'true': 'false' ">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>

Bootstrap3 two dropdowns on the same line

I'm trying to make two bootstrap3 dropdown element working on the same line:
I've tried this:
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div>
Unfortunately it seems that the two dropdowns share the same ul list (only the second one). How can I bind the first dropdown to its ul list and the second one to its own ul list too?

You need to separate your dropdowns in two btn-group:
<div class="btn-group btn-group-inline">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
<div class="btn-group btn-group-inline">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div>
jsfiddle-link

You need them in 2 different divs like:
<ul class="list-inline">
<li>
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
</li>
<li>
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
</li>
</ul>

Added both buttons in <div class="dropdown pull-left">
<div class="btn-group btn-block">
<div class="dropdown pull-left"> //added this
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div> //added this
<div class="dropdown pull-left"> //added this
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div> //added this
</div>
Demo Link Here

Angular ui-bootstrap: dropdown not working with version 0.13.3

I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3. Here's my other question explaining that.
Here's a common plunker.
But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?

To fix this, you have to use the directive dropdown, not only the class.
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<i class="fa fa-cogs"></i> Hi !
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.
Working Plunker

As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
to
<ul class="nav navbar-nav navbar-right">
<li dropdown>
</i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
did the trick.

Dropdown menu in table cell

I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?

The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>

Multiple buttons in Twitter Bootstrap show the same dropdown - why?

I am trying to put together a little dropdown menu with Bootstrap. I put up a sample on JSFiddle here.
The idea would be to have each button trigger a different dropdown list, so that clicking on File gives you a dropdown containing New and Close, clicking on Edit gives you a dropdown containing Copy, Paste and Undo and so on.
However, I get the same dropdown for all buttons. I surely must have done something wrong.
I also had a look at this JSFiddle, linked to by this StackOverflow question, but it doesn't seem to work - no dropdown shows at all when clicking.
Any suggestion?
Here is a copy of the HTML:
<div id="mainMenubar" class="btn-group">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>

This should do what you want:
<div id="mainMenubar">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
</div>
Edited to add styling for the navbar as discussed below:
.navbar {
display: table;
}
.navbar .nav > li > a {
padding: 5px;
}
.navbar-inner {
min-height: 0
}

I think you need to use links (anchors) inside the buttons to trigger the dropdowns instead...
<button class="btn btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
File
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</button>
Here's a working demo
EDIT: Here's an alternate version inside a .btn-toolbar so that each dropdown is inside its own btn-group. This works in FireFox: http://bootply.com/61019

I know this is like nearly 4 years old but i stumble across the same problem. ZimSystem have the correct answer but you mentioned that there is still some white spaces left when you copy and paste his code. Thats because his code isnt wrap inside a correct css style.
The fact that is nice when dropdown and buttons style doesn't look messy when put it in the same group, but anoying thing is the dropdown doesnt work properly.
Anyway here is a working code example without the use of modifying and bootstrap.css
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
dropdown-toggle class is put on the last button because it will put a border radius at the end making it look neat and finished.
I hope this will help someone else.