Bootstrap dropdown doesn't work in Angular

Question

I have an Angular project that uses a dropdown from bootsnipp (Bootstrap snippets). The problem I'm having is that the dropdown won't work with the search bar.

//HTML

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span id="search_concept">Search In</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#"><i class="fa fa-th" aria-hidden="true"></i> All Category</a></li>
      <li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i> IT Solutions</a></li>
      <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i> Design and Multimedia</a></li>
      <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Social Media and Marketing</a></li>
    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">         
  <input type="text" class="form-control" name="x" placeholder="Enter search keyword here">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
  </span>
</div>

//JS

ngAfterViewInit(){
  $('.search-panel .dropdown-menu').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).attr("href").replace("#","");
    var concept = $(this).text();
    $('.search-panel span#search_concept').text(concept);
    $('.input-group #search_param').val(param);
  });
}

have you included bootstrap and jquery in angularcli.json file — Rahul Singh
– Rahul Singh, Commented Dec 22, 2017 at 6:41

Sandip Jaiswal · Accepted Answer · 2017-12-22 07:28:33Z

Please try to avoid jQuery in Angular. Angular have on way to do these tasks. First you need to understand how dropdown works in bootstrap. When you click on dropdown button or link it just add a class on your dropdown to show menu and the class name is "show". Now you know how it works. Now it's time to implement. Follow following steps to done your task.

Declare a toggleFlag named variable in your component.

public toggleFlag = false;
Now create a click event on your dropdown menu button. This will call a method in your component.

Search In
Now create show method in your component. This method will chnage toggleFlag variable.

public showDropdown() { this.toggleFlag = !this.toggleFlag; }
Now it's time to use toggleFlag varibale in your template.

ul class="dropdown-menu" role="menu" [ngClass]="{'show': toggleFlag}"

Hope it will help

Tammy · Accepted Answer · 2017-12-22 08:03:19Z

0

You can try with this ngx-bootstrap .

https://valor-software.com/ngx-bootstrap/#/dropdowns

answered Dec 22, 2017 at 8:03

Tammy

1,1525 gold badges26 silver badges54 bronze badges

Collectives™ on Stack Overflow

Bootstrap dropdown doesn't work in Angular

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related