Extending component vs. scss fumblings


i would like to have a ion-card component with some random styles, since my app follows a bit of a “handmade” graphical-style.
now I could use the nth-of-type css directive to create some faux randomness, but that would only work in a list, or grid where multiple items are visible at the same time.
So i’d rather try injecting some styles on the component from within typescript.

How can that be done?

Thanks for all hints!

You can bind [style.whatever] to a property in your component controller. If you’re talking about trying to manipulate the DOM, that’s a road I recommend left untraveled.

Ah, thanks, so if I’d like to do something like this:

ngOnInit(): void {
  this.el.nativeElement.style.color = Math.round(Math.random()*#ffffff);


I’d need to extend the ion-card component to make it work, right?

I’m saying I would avoid dealing with nativeElement and see no need for JavaScript inheritance. Just set a color property in the controller and use [style.color]="color" in the template.

ah, i see. makes sense, thank yous.