How to Create Custom Header for Angular Accordion

Created: 10 May 2017

In Accordion, group header usually is consisted on text in one line. In order to add more elements to the header, you need to create a custom template that will replace the default appearance. In this article, you will learn how to create an accordion header with icon, title in two lines and action buttons on the right side.

Above presentation shows an Accordion where group header has an icon, text and two buttons: edit and delete. Whenever the edit button is clicked, a text editor will appear where you can enter a new title for the group. As for the delete button, when clicked it will remove the group from the list.

In addition, all groups appear in blue color theme, which overrides the default gray theme.

How to Create Custom Header for Accordion Groups

In order to create a custom header, you need to modify the template of the group header. In this example, the header will have an icon on the left, followed by a title and subtitle, and action buttons aligned on the right side.

To get access to the template for the group header, use the iui-group-header tag. The content of this element is transcluded and placed in the group header space

In case of an icon, you can use an image or the element, which as background has an icon. For group title, we have text in two lines. In order for text lines to appear correctly aligned after the icon, you need to put them in a inline block, like this:

Add Command Buttons to Accordion Header

It is useful to have some command buttons in accordion header. In this example, we have an edit and delete buttons.

These buttons are represented by inline block elements, aligned and placed on the right side of the group header. If you move the mouse cursor over them, their background will change showing a border. This makes it clear which button is currently in action.

When delete button is clicked, related group is removed from the accordion. This is handled by adding a click event to the button and use of removeGroup method from the accordion component.

As for functionality of the edit button, read below.

How to Edit the Accordion Group Title

In order to edit the group title, you can create a text editor that will appear when edit button is clicked. In this example, we are using the HTML input element, which by default is hidden.

When you click on edit button from group header, the group title is replaced by the text editor. This is handled by a variable called editGroup, which determines which group is in edit mode, if any.

When text editor appears, you can enter a new title for the group and confirm the change by pressing the ENTER key. If you press the ESCAPE key or click anywhere outside the editor, the change is cancelled and the editor is closed.

This is all done by handling the keyDown, focus and blur events from the input element. In addition, we are using the iuiFocus directive to move the keyboard focus to the input element, when it appears in the group header. When the input element has the focus, make sure the whole text is highlighted. You can do this, by calling the selectContent method as event handler for the focus event.

Conclusion

By creating a custom template for group header of Accordion component, you can add custom HTML elements or other Angular components and replace the default appearance of the accordion. Furthermore, adding command buttons in header makes it more user friendly with functionality that allows editing or deleting groups on demand.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.