CODEWITHSUNDEEP
javascripthtmlcssangular
Niek Jonkman
Niek Jonkman

Reputation: 1056

How to apply Style to custom component content in Angular?

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.

Upvotes: 14

Views: 15551

Answers (5)

Dimitar Stojanovski
Dimitar Stojanovski

Reputation: 211

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>

  1. 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.

Upvotes: 0

Srinivasan Sekar
Srinivasan Sekar

Reputation: 2119

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>

Upvotes: 5

ishan srivastava
ishan srivastava

Reputation: 383

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.

Upvotes: 12

mr_alex
mr_alex

Reputation: 234

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>

Upvotes: 0

Dhaval Patel
Dhaval Patel

Reputation: 7591

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>

Upvotes: 3

Related Questions