One of my goals is to give users the ability to customize colors and certain styles within my Angular application. I am thinking about creating a structure like this:
Structure:
component-one
folder-with-css-files
style-for-component-1-for-client1.css
style-for-component-1-for-client2.css
style-for-component-1-for-client3.css
style-for-component-1-for-client4.css
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.style-for-component-1-for-client{clientId}.css'],
})
export class AppComponent implements OnInit {
clientId: string;
ngOnInit(): void {
// pseudocode
clientId = service.fetchClientId() // for example
}
}
I'm wondering how I can make this happen. My plan is to have specific css files for each component and assign them dynamically based on the user's id. Is there anyone who can guide me through the process?