Angular components how to use stylesheet defined be the user?

Question

Assumed I have created an Angular component called button and I want the user, who implements it in their app to set the color of the button. Is there a other way than using Input() decorators?

Assuming that, for example, the color of the button in the component is holded by a variable you can use `@viewChild` to get the istance of the button component and use `this.button.color = yourColor;` (Or even within a method). I don't get it why `@Input` is not ok. You could also use `ng::deep` but it's getting deprecated. — Jacopo Sciampi, Jan 28 '20 at 14:20

Ricardo Rocha · Answer 1 · 2020-01-28T14:24:37.077

2

The only alternative way that I'm were of is using ng::deep. But remember, this feature will become deprecated soon!

Follows an example of how to use it.

app.component.html:

<my-component>
   <another-component>
      <div class="buton"></div>
   </another-component>
</my-component>

my-component.component.scss:

.someclasse ::ng-deep {
     .button {
         background-color: white;
     }
}

edited Jan 28 '20 at 14:24

answered Jan 28 '20 at 14:19

Ricardo Rocha

14,612
20
74
130

score 1 · Accepted Answer · answered Jan 28 '20 at 14:29

@Input decorator is the best in this situation, for ex. :

button.component.html:

<button class="your-custom-buttom" [ngStyle]="{backgroundColor: color}">Button</button>

button.component.ts:

 @Input() color = 'red'

app.component.html:

<app-button color="green"></app-button>

Other way, you could add some specific class to button component, and tell user to change it in styles.scss:

styles.scss:

.your-custom-buttom {
  background-color: red;
}

button.component.html:

<button class="your-custom-buttom">button</button>

https://stackblitz.com/edit/angular-dyrn4f?file=src%2Fapp%2Fbutton%2Fbutton%2Fbutton.component.html

Angular components how to use stylesheet defined be the user?

2 Answers2