Angular 1.5 component buttons and styling

Question

As the "replace" configuration is deprecated in general and not available in the 1.5 angular.component I wonder what the best practice is to style the components and keep re-usability high.

Example:

app.component('changePasswordButton', {
   bindings: {
     users: '='
   },
   template: '<button class="btn btn-default"
               ng-disabled="vm.users.length == 0"
               ng-click="vm.changePassword()">Change password</button>',
   controllerAs: 'vm',
   controller: [function () {
      var vm = this;
      vm.changePassword = function () {
         //do it...
      });
   }]});

Let's say I'd like to style the button when using it with for example "btn-primary".

I can't do

 <change-password-button class="btn-primary"></change-password-button>

as the rendered html will be:

<change-password-button class="btn-primary">
    <button ....>
</change-password-button>

Any ideas on how to apply contextual styling in a scalable and nice way on component (buttons)?

Answer 1

The only solution I came up with was to add a binding:

bindings: {
   applyClass: '@?'
},
template: '<button class="btn btn-default {{vm.applyClass}}"...

Does the trick but isn't exactly beautiful.