How to have different styles for common componnent instance in Angular?

user_10236367 0
Viewed 26

I have a component called the amount component which is a shared library and I want to use that component in multiple places and I want to give that component different styles from where i use it. How to achieve it in angular ?

PS: amount component, needs styles for background, h2, button.

angular-material angular sass css
1 Answers

You can give custom styles to your account-component by adding an Input Attribute by using the @Input() Decorator & pass the styles or class name to that component depending upon where it is opened from. Then you can use ngClass or ngStyle to apply those styles to your component.

For example in your account-component:

export class AccountComponent implements OnInit {
  @Input() customClass: string;
}

Account Component HMTL

<div [ngClass]="customClass"> <h1>Account Component</h1> </div>

Account Component CSS

customClassRed:{
  color: red;
}

customClassBlue:{
  color: blue;
}

and in your components where you are opening account-component from just pass the class name (if you use the class name, then you need that class with styles in your components.css as I did above) or the styles depending upon your preferences

Another Component

<account-component [customClass]="customClassBlue"> </account-component>
user_122515580
Related