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;
}
}
@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
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