Add Context Menu to Angular Accordion

Created: 02 December 2015

Accordion directive by default doesn't have a context menu attached. Therefore, when an accordion header is right-clicked the default browser menu will appear. We can override this by creating a custom context menu for each accordion header, which will appear on right-click.

Whenever an option is selected, the itemClick event is fired. Each menu item has a different key so that we can distinguish which one is clicked. By handling this event, we can add a specific operation depending on which option is selected.

In our case, adding and remove operations are simple because we are using some of built-in methods available.

Change Accordion Group Visibility

For group visibility, we are using a dynamic menu. Meaning, whenever an accordion group changes its visibility status, the menu is also updated. When some of these menu options are clicked, the corresponding group will become visible or hidden.

// Watch whether there are no visible groups and show a frame in accordion space

$scope.$watch("visibleGroups", function(newValue){

if (newValue == 0){

$scope.ctrlBackground = 'white';

$scope.ctrlBorder = 'thin solid gray';

}

else {

$scope.ctrlBackground = 'transparent';

$scope.ctrlBorder = 'thin solid transparent';

}

});

Note Each accordion group can display a different context menu. To keep it simple, in our case all groups have the same context menu.

Conclusion

Adding a custom context menu to the groups in Angular Accordion directive is easy. By using the context menu directive, we can create a menu with custom functionality, which will override the default browser menu. Each accordion group or in fact accordion as a whole can have a different and custom context menu attached.

Tab content switching

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.