Search code examples
angularjsangularjs-components

Is there a way to add a class to the component root element?

Except for adding the class in html.

I mean something like that:
In html

<my-component></my-component>

In js

angular.module('app').component('myComponent', {
  template: '<div class="inner-element">Inner element</div>',
  className: 'outer-element' <--- wanted property
});

This is how I want it to look after render:

<my-component class="outer-element"> <--- that's what I want to get
  <div class="inner-element">Inner element</div>
</my-component>
Solution

  • You could specify controller that adds class on component init

    controller: function($element) {
  this.$onInit = function() {
    $element.addClass('outer-element')
  };
}

    But this kinda goes against encapsulation and such.