title: I have a custom dropdown component in each header cell of ngx-datatable
body: <p>I have custom dropdown component in each header cell of <em>ngx-datatable</em>. But when I click at dropdown the it is going inside <em>ngx-datatable</em> body. How can I fix the issue please help me. </p>
  
  <p>I am using angular 4.0 and typescript 2.4.</p>
  
  <p>Screen shot:
  <a href="https://i.stack.imgur.com/jIWVR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jIWVR.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/RwQtB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RwQtB.png" alt="enter image description here"></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code> &lt;div&gt;
        &lt;ngx-datatable style="height:450px;"
          class='material'
          [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}'
          [columnMode]="'force'"
          [headerHeight]="height"
          [rowHeight]="getRowHeight"
          [scrollbarV]="true"
          [scrollbarH]="true"
          [loadingIndicator]="loadingIndicator"
          [rowClass]="getRowClass"
          (page)="onPage($event)"&gt;
        &lt;div&gt;
          &lt;ngx-datatable-column 
            [width]="50"
            [frozenLeft]="true"&gt;
              &lt;ng-template let-row="row" let-value="value" ngx-datatable-cell-template &gt;
                &lt;input type="checkbox" 
                (ngModelChange)="checkButtonState($event, row)"
                [ngModel]="row.status"
                &gt;
            &lt;/ng-template&gt;
          &lt;/ngx-datatable-column&gt;
  
          &lt;ul&gt;
            &lt;li *ngFor="let col of tableKeys; let i=index; let last = last" &gt;
          &lt;ngx-datatable-column name={{col}} width="230" [resizeable]="true"&gt;
            &lt;ng-template let-column="column" ngx-datatable-header-template &gt;
                &lt;div class="draggable" style="height:30px;width:160px;background:transparent;z-index:1000;position:relative;cursor:pointer;"&gt;&lt;/div&gt;
  
                                      &lt;ng2-multiselect 
                                        [options]="dropdowns[col]"
                                        [loading]="isLoading"
                                        [(ngModel)]="multiModels[col]"
                                        [texts]="{'defaultTitle':col}"
                                        (dropdownOpen)="dropdownOpen()"
                                        (dropdownClosed)="dropdownClosed(col)"
                                        &gt;
                                      &lt;/ng2-multiselect&gt;   
          &lt;/ng-template&gt;
  
            &lt;ng-template let-row="row" let-value="value" ngx-datatable-cell-template &gt;
                &lt;i [innerHTML]="row[col]"&gt;&lt;/i&gt;
            &lt;/ng-template&gt;
          &lt;/ngx-datatable-column&gt;
  
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/ngx-datatable&gt;
      &lt;/div&gt;
  </code></pre>