How to style Angular custom components from the attached directive?


I made a directive which is supposed to add a custom background-color to #itemA and #itemB.
#itemA is a Label while #itemB is a custom Angular component containing another Label.

The directive works well for #itemA (the Label), but #itemB (the custom component) cannot be styled because background-color has not effect on it.

Since I cannot use DOM things like querySelector(':only-child'), how am I supposed to reference the Label inside the custom component in order to style it?


I think your directive gets a reference to a ProxyViewContainter containing 1 child: the label in your custom component.

So try changing the last line of your directive to: this.renderer.setStyle(this.itemB.nativeElement.getChildAt(0), 'background-color', 'lightblue');