1

I have a reusable card component which contains heading , para and button. I want to use it 3 different pages, the content doesnt change but styling changes.

For eg: In page 1: card has padding of 10px, background-color: white and text-align: center

In page 2: card has padding of 16px and text-align: left and button background : lightblue

In page 2: card has text-align: center and button background : green

how to do it, should i add new style sheet or is there any other way to solve this problem

Rey
  • 13
  • 3
  • I feel that your best bet is using css variables -your card.component has a .css with variables. In parent you change the value of this variables-. Take a look this [SO](https://stackoverflow.com/questions/75378251/is-it-possible-to-apply-external-css-without-using-viewencapsulation-none/75379815#75379815) – Eliseo Mar 21 '23 at 09:57

2 Answers2

0

I think you would be able to use NgClass to solve your problem

https://angular.io/api/common/NgClass

Depending on how everything is written, you may also have to use a @Input and pass in some information to use in the NgClass statement

Ryan Baker
  • 75
  • 5
0

You can simply add string Input parameter to child component. Something like:

@Input() styleVariant: string;

then in your template file you would simply apply those:

<div id="container" class="{{styleVariant}}">
  //your code goes here
</div>

Different styleVariant classes you can keep in your child's style class with appropriate selectors, e.g.:

.some-option1 {
  card {
    padding: 10px;
    >button {
      background-color: white;
    }
  }
}

Simply pass the variant name of styles you want to apply.

<child-comp (styleVariant)="some-option1"></child-comp>

To make it cleaner and safer to use, you can define styleVariant not as a string but as an enum with available values.

F1sher-Man
  • 28
  • 3