@HostBinding can only set global css classes

[kemsky]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting

Current behavior
Component:

...
    @HostBinding('class.small')
    private small:boolean = true;
...

Component style, private styles: ['...']:

.small {
    height: 100px !important;
}

Rendered:

<div class="small"></div>

And it does not have any effect obviously.

Expected/desired behavior

It should be possible to specify internal/private component class: :host.small

Please tell us about your environment:

• Angular version: 2.0.0-rc.4
• Browser: [all]
• Language: [TypeScript 1.8.10]

[pkozlowski-opensource]

You can use pseudo element selector :host to scope styles to the host element instead of its content: https://plnkr.co/edit/EPK3KnMGiCMs2ZTIYNT6?p=preview

In the future please:

• fill inn issue template - most importantly provide a minimal plunker
• ask on a support forum if you are not sure if you are facing a bug or not, see: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

[kemsky]

For anybody who is interested, class has to be defined twice to be used with HostBinding and template:

:host.small, .small {
}

[zoechi]

Should be :host(.small) {}

[kemsky]

@zoechi, it does not work:

:host(.small) {
    height: 60px !important;
}
//==> host only, :host(.small) and :host.small render the same css
[_nghost-edd-26].small {
    height: 60px !important;
}

vs

:host.small, .small {
    height: 60px !important;
}
//==> host and template
[_nghost-ykl-22].small, .small[_ngcontent-ykl-22] {
    height: 60px !important;
}

[zoechi]

Please provide a Plunker that demonstrates the actual behavior and explain what behavior you expect.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}