0

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?

2
  • Do you mean open/close or enable/disable? Commented Feb 5, 2017 at 16:37
  • @GünterZöchbauer sorry open close Commented Feb 5, 2017 at 16:38

1 Answer 1

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>
Sign up to request clarification or add additional context in comments.

19 Comments

i think he wanna do some act like bootstrap dropdown(open/close dropdown)
@TiepPhan thanks. Seems I took the question to literally :D
i made a change in your code, based on bootstrap css style
@GünterZöchbauer Nothing happens when i added the code. anything to do with the component.ts?
@Sajeetharan did you take the changes of Tiep Phan into account?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.