How to apply Style to custom component content in Angular?

You should never alter the child style from the parent, instead here is what you should do :

Apply a class to the parent (let's say green-button). In the child's css you need to check that does my parent has a class green-button, if yes then it should change it's color.

In the child's css file ->

:host-context(.green-button) button{
color : green
}

You should not transfer styles from parent to child essentialy because it spoils the ViewEncapsulation goodness that Angular is proud of. Here is some refrence . : Link

Also, the child component should be responsible for how does it button looks. The parent should be concerned about itself. In the future, if you will have two children to your parent, it will be difficult to manage what style to pass to what child. Using this method, altering style is not only easy but also manageable.

Upvote and mark as solved if I was able to help.Cheers.

Try to change styles into [styles]

custom-component-example.html

<button [ngStyle]="styles">
    <ng-content></ng-content>
</button>

custom-component-example.ts

@Input() styles: any = {};

Use,

<custom-component-example [styles]="{color: green}">some text</custom-component-example>

You need to pass the style property to the child component using the @Input() like

Your child component HTML code should look like

<div [className]="tableCss">
</div>

Your child component ts file code shoule look like

@Input() tableCss: string;

Your Parent component should look like

<app-list [tableCss]="'table-responsive table-borderless table-grid mt-4 border-top border-primary'"></app-list>