CheckBox in Header of Angular Accordion

Created: 12 May 2017

By default, the Accordion header contains an icon and label. If you want to add other HTML elements to accordion header, for example a checkbox, you need to modify the header template. In following sections of this article, you will learn how to create custom accordion header with checkbox in it.

In above demo, in each group header there is a checkbox. Whenever the checkbox is clicked, the group will become locked and if it is expanded, will collapse. The group will remain collapsed until the checkbox is unchecked. This example shows how to lock groups on demand, and show their content only when required.

How to Place a CheckBox in Accordion Header

To add a checkbox to accordion header, you can use the standard HTML input element or any other custom CheckBox component for Angular framework. The header template in this case looks like this:

• HTML5
• CSS3

// 
// app.template.html
//

<iui-accordion [groups]="data" (beforeSelect)="onBeforeSelect($event)" #accordion>
   <iui-groupbox *ngFor="let group of data" [data]="group" [expandBoxType]="'plus-minus'" #groupbox>
        <iui-group-header>
            <div class="group-header">
                <input class="acc-checkbox" type="checkbox" [(ngModel)]="group.checked" (mousedown)="onMouseDownCheckBox($event, group)" />
                <span>{{group.text}}</span>
            </div>
        </iui-group-header>
        <div class="acc-hcb-group-content">Content of {{group.name}}</div>
    </iui-groupbox>
</iui-accordion>
                            

/*
* sample-styles.css
*/ 

.group-header
{
    display: inline-block;
    padding: 3px 0;
}
.group-header span
{
    display: inline-block;
    margin-top: 1px;
    vertical-align: top;
}
.acc-checkbox
{
    background: url("app/integralui/resources/checkbox/checkbox-checked-5.png");
    border: thin solid red;
    display: inline-block;
    margin: 2px 1px 0 2px;
    width: 16px;
    height: 16px;
    vertical-align: top;
}
                            

The input element value (using the ngModel directive) is linked to the checked field of group object. In this way, any change to the check box is applied to the group object and vice versa. We will use this value to create a functionality that will lock the group and prevent it from expanding (see more information in below section).

Related: Accordion Header with Command Buttons

In addition, to avoid expand/collapse process, you need to handle the mousedown event, so that clicks from the checkbox will not bubble up the accordion group. This prevents the default behavior, which is expanding the group when its header is clicked.

• Angular

onMouseDownCheckBox(e: any, group: any){
    if (!group.checked && group == this.accordion.selectedGroup){
        this.accordion.collapse(group);
        this.accordion.clearSelection();
    }

    e.stopPropagation();
}                            

If a group is expanded, by clicking on the checkbox you can manually collapse the group. For this purpose the collapse method which collapses the group, and clearSelection method which removes the selection flag. Only one group can be selected, usually the group that is currently expanded.

Use Header CheckBox to Lock Groups in Accordion

Although we have added a checkbox to the group header, it doesn't have any functions yet. Whenever the checkbox is clicked, the checked value of group object is updated. However, to truly lock the group, you need to handle the beforeSelect or beforeExpand events.

• Angular
• HTML5

onBeforeSelect(e: any){
    if (e.group && e.group.checked)
        e.cancel = true;
}
                            

// 
// app.template.html
//

<iui-accordion [groups]="data" (beforeSelect)="onBeforeSelect($event)" #accordion>
   <iui-groupbox *ngFor="let group of data" [data]="group" [expandBoxType]="'plus-minus'" #groupbox>
        <iui-group-header>
            <div class="group-header">
                <input class="acc-checkbox" type="checkbox" [(ngModel)]="group.checked" (mousedown)="onMouseDownCheckBox($event, group)" />
                <span>{{group.text}}</span>
            </div>
        </iui-group-header>
        <<div class="acc-hcb-group-content">Content of {{group.name}}</div>
    </iui-groupbox>
</iui-accordion>
                            

In this event handler, you can check whether the group is checked, if it is you can cancel the selection process. This also cancels the expand process. In this way, you can prevent group from expanding.

Conclusion

Using custom template, you can add a CheckBox element to the Accordion Header. Furthermore, by providing functionality to clicks from the check box, you can lock a specific group during run-time. This will prevent the group from expanding, and show its content only when required.

The Accordion component is part of IntegralUI Web.