How to apply Style to custom component content in Angular?

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

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 1

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.

Answer 2

I'm using this approach to style my component like this. But i'm using scss so you have to use scss if you want to have nested style like mine

custom-component-example {
  color: red;
  & > div {
    font-size: 16px;
 }
}

Answer 3

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>

Answer 4

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>

Answer 5

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>

Answer 6

Try this:

1. Add a class on that component into your template file like this example bellow. (class='toggle-button').

<custom-component-example class="toggle-button"> Button name </custom-component-example>

2. Use ::ng-deep to your scss file for styling this class and add !important to that parameter.

    ::ng-deep.toggle-button {.switch-btn { width: 80px;important: height; 40px !important;}}

*"switch-btn" class is a class into the parent component.