How to enable/disable dropdown with angular2?

Question

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><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
   </ul> 
 </div>

How to enable dropdown on button click with angular?

Do you mean open/close or enable/disable?

Günter Zöchbauer
– Günter Zöchbauer

2017-02-05 16:37:15 +00:00
Commented Feb 5, 2017 at 16:37 — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 5, 2017 at 16:37
@GünterZöchbauer sorry open close

Sajeetharan
– Sajeetharan

2017-02-05 16:38:23 +00:00
Commented Feb 5, 2017 at 16:38 — Sajeetharan
– Sajeetharan, Commented Feb 5, 2017 at 16:38

Günter Zöchbauer · Accepted Answer · 2017-02-05 17:17:47Z

3

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><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></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><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
   </ul> 
 </div>

edited Feb 5, 2017 at 17:17

answered Feb 5, 2017 at 16:29

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

19 Comments

Tiep Phan Over a year ago

i think he wanna do some act like bootstrap dropdown(open/close dropdown)

Günter Zöchbauer Over a year ago

@TiepPhan thanks. Seems I took the question to literally :D

Tiep Phan Over a year ago

i made a change in your code, based on bootstrap css style

Sajeetharan Over a year ago

@GünterZöchbauer Nothing happens when i added the code. anything to do with the component.ts?

Günter Zöchbauer Over a year ago

@Sajeetharan did you take the changes of Tiep Phan into account?

|

Collectives™ on Stack Overflow

How to enable/disable dropdown with angular2?

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related