12

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.

Niek Jonkman
  • 1,014
  • 2
  • 13
  • 31
  • Since it is Angular 2+, each custom component should be assigned with a CSS file or inline styles while defined those. Those styles are presumably static. Why are we trying to inject it at the run-time? – Ashokan Sivapragasam Jun 20 '19 at 10:25
  • I guess, each component in Angular 2+ is supposed to be self-contained. – Ashokan Sivapragasam Jun 20 '19 at 10:26
  • I don't think there is an issue with both the approaches, can you check, from where the style is coming to button, there might be weight/priority issue with stylings. when you write style attribute, it is independent of angular/javascript. it is just HTML and CSS – 3960278 Jun 20 '19 at 10:33

5 Answers5

11

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.

ishan srivastava
  • 363
  • 1
  • 3
  • 10
  • 1
    Hello, I used your solution to my problem. It works good, I have also tried some of the other solutions but I couldn't get them to work properly. Appreciate the explanation too. – Niek Jonkman Jun 20 '19 at 11:43
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>
Dhaval Patel
  • 7,471
  • 6
  • 37
  • 70
3

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>
Lukas Bünger
  • 4,257
  • 2
  • 30
  • 26
Srinivasan Sekar
  • 2,049
  • 13
  • 22
0

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>
mr_alex
  • 224
  • 1
  • 6
0

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.

Dimitar Stojanovski
  • 141
  • 1
  • 6