I am having trouble applying styles to a child element within a custom component.
Selectors:
<custom-component-example></custom-component-example>
Code snippet from custom-component-example.html:
<button>
<ng-content></ng-content>
</button>
When I try to style it like this:
<custom-component-example style="color: green">some text</custom-component-example>
Or like this:
<custom-component-example [ngStyle]="{'color': green}">some text</custom-component-example>
The button text does not turn green. The styling could be anything, such as font-weight or size, among other things.
I have also attempted the solutions found in this discussion:
Best way to pass styling to a component
However, none of these solutions seem to affect the child element (in this case, the button).
How can I pass any styling and apply it to the child element? In this example, how would I pass styling through the custom-component-example selector and apply it to the button along with its text?
Thank you in advance.