Question: I am trying to apply styling to a child of a custom component.

Selector:

```
<custom-component-example></custom-component-example>

```

Inside custom-component-example.html:

```
<button>
    <ng-content></ng-content>
</button>

```

If I were to use style 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 will not get green. The styling could be anything (for example font-weight or size or anything really).

I have also tried the solution to this topic:

[Best way to pass styling to a component](https://stackoverflow.com/questions/35734073/best-way-to-pass-styling-to-a-component)

But that also does not apply to the child element (button in the example above). 

How do I pass any given styling and apply it to the child element, in the case of the example, how would I pass styling (through the custom-component-example selector) and apply it to the button and the button's text?

Thanks in advance.

Answer: 
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>

```
If you would like to use input and styles without deep selectecting of css like that:

```
a > b > c {
    color: green;
}

```

Change this class to this:

```
class CustomComponentExample {
    @Input() styles;
}

```

Set styles for this input:

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

```

Use this property in your component:

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

```