title: Disable the header click in grouping in Angular 2 MultiSelect Dropdown
body: <p>I am using angular 2 multiselect, I want to disable the header click in case of group selection. I need grouping just for logical grouping not for selection, so please suggest how can I disable header click, its should not select child items.</p>
  <p>This is the plugin I am using <a href="https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby" rel="nofollow noreferrer">https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby</a></p>
  <pre><code>&lt;angular2-multiselect [data]=&quot;otherSkillList&quot; formControlName=&quot;otherskills&quot; [(ngModel)]=&quot;selectedotherSkill&quot; [settings]=&quot;otherSkillSettings&quot; (onSelect)=&quot;onOtherSkillSelect($event)&quot; (onDeSelect)=&quot;onOtherSkillDeSelect($event)&quot; (onSelectAll)=&quot;onotherSkillSelectAll($event)&quot;
                              (onDeSelectAll)=&quot;onOtherSkillDeSelectAll($event)&quot;&gt;
                          &lt;/angular2-multiselect&gt;
  
  
  this.otherSkillSettings = {
    singleSelection: false,
    text: 'Select ' + this.adminPage.OtherSkillsOtherServices,
    enableCheckAll: false,
    enableFilterSelectAll: false,
    searchPlaceholderText: 'Search ' + this.adminPage.OtherSkillsOtherServices,
    enableSearchFilter: true,
    badgeShowLimit: 5,
    limitSelection: 8,
    groupBy: &quot;category&quot;,
    disabled: false
  };
  </code></pre>
  <p>Somehow, using CSS, I tried removing the checkbox for all the the headers, but the header itself is still clickable. In below, &quot;Front-End Skills&quot; is still clickable &amp; selects all below items in that group.</p>
  <p><a href="https://i.stack.imgur.com/B5nhs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B5nhs.png" alt="enter image description here" /></a></p>