I’m working on reusable components in angular.
My Destination is to build a Component whoses styles can be modified by other Users.
As a example there are the following snippets.
There is a nice blue box with a p-Tag, which get styled by the css. Now a other user takes this Component, but needs an other bg-color, color, or wants the div with a rounded border.
Whats the best way to make the Stylings modifyable?
Parameters at the typescript-file seems to be no choice.
A class which contains Parameters like “TextStyle” in Jetpack Compose can not be added in the css-file.
The only solution for me seems to implement the Component and Change the css of the Component directly.
Is this the only way, or can this be done a more elegant way?
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-my-component',
standalone: true,
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
@Input() value: string = '';
}
<div class="container">
<p>{{ value }}</p>
</div>
.container {
background-color: blue;
color: white;
}
p {
font-weight: bold;
}