Solution 1 :

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

Solution 2 :

@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

Problem :

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?

Comments

Comment posted by Jacopo Sciampi

Assuming that, for example, the color of the button in the component is holded by a variable you can use

By

Leave a Reply

Your email address will not be published. Required fields are marked *