Angular 2, class attribute for customized component

Question

Is the class attribute useful in angular 2 for a customized component? For example:

<app-my-first-component class='darkBackground'></app-my-first-component>

It looks like the class does not affect the component.

class attribute any where inside HTML is used to add a css class. Does your question makes sense? — Aravind
– Aravind, Commented Mar 6, 2017 at 19:25
I think he/she wants to pass the class attribute to child component. If that's the case, you can define global css style in the file src/styles.css. Otherwise, parent and child don't have same scope, so the css styles in parent are not accessible in child — mickdev
– mickdev, Commented Mar 6, 2017 at 19:32

Günter Zöchbauer · Accepted Answer · 2017-03-06 21:26:41Z

1

You can address the class by adding a style to app-my-first-component like

@Component({
  ...,
 styles: [`
  :host(.darkBackground) {
    color: white;
    background-color: darkgrey;
  }`]
})

answered Mar 6, 2017 at 21:26

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Xilbreks · Accepted Answer · 2017-03-06 20:03:05Z

1

Yes, you can use class attribute. And, there is another way to do the same, using host attribute.

@Component({
selector: 'app-my-first-component',
host: {'class':'darkBackground'}
})

answered Mar 6, 2017 at 20:03

Xilbreks

1572 silver badges3 bronze badges