Is there a way to dynamically load CSS styles in a component based on URL parameters? The idea is that the user will access the page using a URL structure like SOME_URL/{screenSize}/{type}. While the component remains the same, the CSS styling should change based on these parameters. I already have a router implemented and the parameters are being captured - how can I achieve dynamic loading of CSS files for this purpose?
Below is a snippet of code, the aim is not to load a static CSS file as shown in the example, but rather load a CSS file like screen.component.21-5.a.css
@Component({
selector: 'app-screen',
templateUrl: './screen.component.html',
styleUrls: ['./screen.component.css']
})
export class ScreenComponent implements OnInit {
public screenType = 'a';
public screenSize = '21-5';
ngOnInit() {}
constructor(private mediaService: MediaService, private route: ActivatedRoute) {
this.parameterSubscription = route.params.subscribe((params) => {
if (params.size) {
this.screenSize = params.size;
}
if (params.type) {
this.screenType = params.type;
}
});
}
...
}