angular default class for component

Question

How do you add a default CSS class to an angular component?

something like this:

@Component({
  selector: 'app-slide-in-menu',
  templateUrl: './slide-in-menu.component.html',
  styleUrls: ['./slide-in-menu.component.styl'],
  class: 'app-slide-in-menu'
})

But obviously class doesn't work

My desired result is that the component will be assigned the css class given on the topmost element within the component or on the component itself.

Thanks

Possible duplicate of [How to add "class" to host element?](https://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element) — David, Mar 24 '18 at 19:11
Did you name your css-class on purpose "slide-in-menu.component.styl"? Shouldn't it end in '.css' or '.scss' instead of '.styl'? Is this maybe the problem you're facing? — , Mar 24 '18 at 19:12
You could add a class to the template and override it in each individual components .styl file? — Shane, Mar 24 '18 at 19:23
Why do you need the class? You can style app-slide-in-menu element directly. — Tomasz Kula, Mar 24 '18 at 23:50

score 2 · Accepted Answer · answered Mar 24 '18 at 19:48

2

:host{...} You can use :host to style the component

answered Mar 24 '18 at 19:48

abbas-ak

642
3
13

score 1 · Answer 2 · answered Dec 22 '21 at 12:28

1

If you want to add the class without condition add this:

HostBinding('class.yout-desired-class') yourClass = true;

Otherwise:

HostBinding('class.yout-desired-class') yourClass = someCondition;

answered Dec 22 '21 at 12:28

Ariel Braun

86
1
8

angular default class for component

2 Answers2