Bootstrap dropdown list not opening in bs grid in Angular 2

Question

I have a bootstrap grid and in some cells there should be shown a dropdown component of bootstrap. Here is the code:

<div class="table-responsive">
    <table class="table">
        <thead>
            ...
        </thead>
        <tbody>
            <tr *ngFor="let item of data">
                <td *ngFor="let col of columns">
                    <!-- other cells -->
                    <div *ngIf='col.type=="dropdown"' class="dropdown">
                       <!-- This dropdown
                        component
                        is not opened
                        inside my grid-->
                        <!--Dropdown Code starts-->
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <!--Dropdown Code ends-->
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

And it is shown like that:

However, if i click on dropdown buttons, their list does not become visible. If i use the same code in somewhere else in my component, it is working properly.

I get no error messages and bootstrap is correctly loaded (all other components also work). What can be wrong with this?

Answer 1

There is a plugin called ng2-bootstrap which is developed by the angular-ui team.
so i think it is better to use it than polluting the angular2 ecosystem with jQuery .
Here is the link

Answer 2

As I remember, Bootstrap Dropdowns use JQuery plugin and you have to initialize all your dropdowns by calling

$('.dropdown-toggle').dropdown()

What happens with Angular2, and specifically with *ngIf is that Angular recreates contents (in your case <div class="dropdown">) each time condition changes (you can see that when condition is not true whole internal HTML part is gone from page). Even when you load page contents doesn't exist and are created later... I.e. in your case initialization happens before grid-dropdown is rendered.

So I assume that you have to init Bootstrap dropdown every time your col.type changed.

Or you can try to bind to <div [hidden]="col.type == 'dropdown'"> property instead... But still Dropdown Init has to be done on one of the ngAfterViewInit, ngAfterContentInit, ngAfterContentChecked, ngAfterViewChecked Lifecycle hooks of the component that contains these elements...

Anyway, I would propose you to use one of the existing Angular2-Dropdown libs instead...