宿主样式应用于Angular2中的组件

Question

I am currently in the process of creating a custom form component for my Angular component and am running into some styling issues.

I'd like for my input to be able to take variable widths and for them to be controlled by the host component.

For example: <my-input class="input"> would have a corresponding class as such:

.input {
    width: 250px;
}

For some reason, if I do this, the rules are just ignored and not applied to my component.

I've seen others wrap their components in what seems like unnecessary divs and then styling those parent divs so that the content inside fits. I don't want to write wrappers just for styling purposes when a CSS rule would suffice.

Would doing this involve using :host ? Also, how about, host-context(.input) and then applying the classes inside of the consumers CSS ?

Answer 1

I would advice against using ::ng-deep since the Angular team is planning on deprecating it .

If you want to style something within your component from whatever component is hosting yours I suggest you create a host-binding/input and then use that value to bind to your component using the style-directive.