Pass class to children component host

Question

I'm used to React approach where I could basically inject anything anywhere.

I have a dumb Button or app-button component in Angular. It's inline-block (:host class), so its width depends on the content. In this case, I can't override its params like display: block or set width. I can do it manually by adding new @Input per param ([display], [width]) but it's not really nice.

The behavior I want to have is an input/directive on this component to provide an explicitly inject class to the inside of the child component.

In React I would just add prop with the class name and assign it or pass some inline styles, depending on what style system I'm using.

Is there any way/lib/util to handle this problem?

Answer 1

You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.

Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.

Technically, it could be done as follows:

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.