CODEWITHSUNDEEP
csstypescriptangular
Mihai Răducanu
Mihai Răducanu

Reputation: 12585

How do I reference host element in CSS of an Angular2 component?

I have a component in Angular2 and I want to set the padding on the host element.

@Component({
    selector: 'my-app',
    template: 'Hello world'
    styles: ['my-app {padding: 10px}']
})

in browser, my style looks like this:

my-app[_ngcontent-icu-3] {padding: 10px;}

while my host element looks like this:

<my-app _ngcontent-icu-1="" _nghost-icu-3="">
    <div class="content" _ngcontent-icu-3=""></div>
</my-app>

As I understand it, Angular2 adds these _ng attributes so CSS references specific components.

But how do I reference the host element from the CSS defined inside the component?

Upvotes: 1

Views: 510

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

styles: [':host {padding: 10px}']

or

@Component({
    selector: 'my-app',
    template: 'Hello world'
    host: {'[style.padding.px]': '"10"'}
})

The added _ng... classes are for emulating scoped styles (default encapsulation: ViewEncapsulation.Emulated) similar to what shadow DOM does.

Upvotes: 3

Related Questions