CODEWITHSUNDEEP
cssangularsassangular-material
Abhinav Akhil
Abhinav Akhil

Reputation: 419

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

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.

Upvotes: 1

Views: 857

Answers (1)

HassanMoin
HassanMoin

Reputation: 2194

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>

Upvotes: 2

Related Questions