0

I want to have conditional styleUrls within my component decorator with the condition being defined within my component class like the following

@Component({
    selector: 'foo',
    templateUrl: './foo.component.html',
    // Wouldn't probably say 'this' but still..
    styleUrls: [this.condition ? './foo1.component.scss' :  './foo2.component.scss']
})
export class FooComponent {
    public condition = flase;
    
    public changeCondition(condition: boolean): void {
        this.condition = condition;
    }
}

I have seen similar SO questions that solves the issue by defining the condition variable outside the class, but this is not what I am looking for. I also went through other answers that uses the deprecated ComponentFactory which is also not what I'm looking for.

Is there any other way I can have such a thing?

Mohamed Karkotly
  • 1,364
  • 3
  • 13
  • 26
  • I feel it's **not** possible. Think that Angular join all the .css declares in stylesUrls in a unique bundle.css (plus the styles.css an others). You can to have a .css using css variables and change by code this variables (event read from a json file) like this [SO](https://stackoverflow.com/questions/76374772/extending-scss-styles-in-an-angular-dashboard-with-plugin-architecture/76439739#76439739) but I don't think you can change in styleUrls – Eliseo Jun 28 '23 at 10:06
  • 1
    Don't reinvent the wheel. Use for this `ngStyle` or `ngClass`. – derstauner Jun 28 '23 at 10:41
  • I don't think it’s possible. Component styles are processed at build time. But just to add: `extractCss` is deprecated. Component styles are now always bundled in the component bundle. – Pieterjan Jun 28 '23 at 11:00

0 Answers0