the shortest way to set font-weight:bold; to a content of the component

Question

What should I write into scss file to set font-weight: bold; for the innner content of the component (so that the inner tags inherit it)? using

:host {
  font-weight: bold;
}

does this work but it makes it for the component tag itself as well.

What's the best technique in this case? Also, I would avoid to stick with using div, p, span or whatever tag is a child of the component tag.

Thank you.

please include a sample of your code. Are you nesting components? — timber535, Feb 07 '20 at 12:54
For selecting child component's tags, you can use ::ng-deep see: https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep — timber535, Feb 07 '20 at 12:58

score 0 · Answer 1 · answered Feb 07 '20 at 12:54

You can use the universal selector. Inside your component .scss place:

* {
  font-weight: bold;
}

The angular compiler will add the content host tag to the selector, which will result in something like *[_ngcontent-uch-c0].

Using the wildcard could have some performance impact though, so use carefully

score 0 · Answer 2 · answered Feb 07 '20 at 12:58

0

You can turn off encapsulation of the component

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

Take care if you do this then all global style could apply on the DOM inside of your component.

answered Feb 07 '20 at 12:58

Bálint Réthy

2 Answers2