Dynamically generating CSS classes at runtime in Angular 7 - css

Question

I have an Angular 7 application where I need to dynamically generate CSS classes in my component at runtime.
First off: I know about [ngStyle] and [ngClass]! I need to do some stuff using pseudo-selectors which I can't generate using these.
Now, the naive approach: I'll just use Angular to template my CSS!
<style *ngFor="let class of classes">
.{{class.prefix}}-target {
border: 1px solid maroon;
text-align: center;
}
.{{class.prefix}}-control:hover ~ .{{class.prefix}}-target {
background: red;
}
</style>
The problems with this approach:
VS Code complains that I'm putting Angular templating inside a CSS class.
Angular doesn't interpolate {{class.prefix}} in the final resulting HTML- it just literally puts {{class.prefix}} there.
Is there a way to do this in Angular, either with a library that's meant for this or an approach I can use? Thanks in advance!

Answer 1

Depending upon how dynamic you need the component to be...
You could declare the prefix (or dynamically generate it) outside of the component class. Then use a JavaScript template string to interpret the styles before they get processed by the #Component() decorator's metadata.
Like so:
const classPrefix = 'bar';
#Component({
selector: 'app-foo',
template: `
<!-- Your HTML template -->
`,
styles: [`
.${classPrefix}-target {
border: 1px solid maroon;
text-align: center;
}
.${classPrefix}-control:hover ~ ${classPrefix}-target {
background: red;
}
`]
})
export class FooComponent {
/* . . . */
}