Make a button group out of directives (components)

Question

So everything should be a component.

Suppose I define some button components for editing/deleting/viewing my domain objects. As an example:

angular.module('xxx').component('editButton', {
  bindings: {domainObject: '<'},
  template: '<button class="btn btn-default" ng-click="$ctrl.displayEditForm()">Edit</button>'
  controller: /* ... */
});

And I use it as:

<edit-button domain-object="$ctrl.myDomainObject"></edit-button>

Works great! However, when I need a specific markup (for example a button group), I'm trying to do it as:

<div class="btn-group">
  <edit-button domain-object="object"></edit-button>
  <delete-button domain-object="object"></delete-button>
</div>

Which of course is not displayed correctly by Bootstrap because my buttons are wrapped with the component definitions.

Keeping in mind that the replace functionality is deprecated, I wonder how to overcome this problem ?

Answer 1

A component is not always an html element. It can be (and often is a group of html elements)

Your component template should include the surrounding div btn-group.

template: '<div class="btn-group"><button class="btn btn-default" ng-click="$ctrl.displayEditForm()">Edit</button>'...etc.

Now if you want to reuse buttons individually, you can just override bootstrap's styles so that they don't use '>'

.your-page .btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

instead of

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
}