If you're looking for a way to dynamically apply classes or styles in Angular, there are multiple approaches you can take.
The first option is to use the [ngClass] directive. You can define the classes in your CSS and TypeScript files, and then dynamically apply them based on certain conditions. Here's an example:
.html
<div [ngClass]="class">
<hello name="{{ name }}"></hello>
</div>
.ts
class = 'option';
.css
.option{
background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);
}
The second option is to use a pipe. For more details on this approach, you can refer to this link.
Lastly, you can define a predefined style in the TypeScript file and modify the color variables as needed. Here's an example of how you could achieve this:
.html
<div [style.background]="background">test</div>
.ts
blueColor = '#0000FF';
orangColor = '#FFA500';
background= 'linear-gradient(to right, '+ this.blueColor+' 0%, '+ this.blueColor+' 50%, '+ this.orangColor+' 50%, '+ this.orangColor+' 100%)';
For a live demonstration, you can check out this Stackblitz demo.