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

Question

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>

@RafaelGadottiBachovas, I want to add a class to the root element. — through.a.haze, Jul 05 '17 at 13:26

Yury Tarabanko · Accepted Answer · 2017-07-05T14:23:50.753

9

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.

edited Jul 05 '17 at 14:23

answered Jul 05 '17 at 13:48

Yury Tarabanko

44,270
9
84
98

Thanks! But if there isn't special property so how should I do this in more 'encapsulation and such' way? I need the class to organize my CSS. – through.a.haze Jul 05 '17 at 14:12
@through.a.haze Ideally parent template should add classes to elements (components) it renders depending on its own data and state. Can't you simply use tag name (my-component {background-color: navy;}) to organize your CSS? – Yury Tarabanko Jul 05 '17 at 14:21
I can but I'd prefer to use classname in CSS. But anyway thanks to you! I accept your answer. – through.a.haze Jul 05 '17 at 15:40
How can you achieve flexible-component-layout without "breaking encapsulation"? (Imagine to have a `Timeline` component with multiple `Event` child-components with the need of being `flex-100` or `flex-50` based on device width) – s1moner3d Oct 24 '17 at 17:42

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

1 Answers1