Angular2/4 Dynamic Checkbox/Radio Styling

Question

I have an Angular 2/4 application where a user can set his own style. This means he can set a color which is then used for links, buttons etc. This is done by directives e.g. like that:

@Directive({
    selector: '.btn-primary'
})

export class ColorDirective {
    @HostBinding('style.color') color: string;

    constructor(private store: Store<AppState>) {
        this.store.select('config', 'config').subscribe((config: Config) => {
            this.color = config.color;
        });
    }
}

Now we'd also like to style the checkboxes and radio buttons like that. They are currently styled using :before and :checked selectors. Angular cannot select on pseudoelements. Thus the approach above is not possible. Any ideas how to achieve this outcome?

Can you show us example of style on `:before` pseudoelement? — yurzui, Jul 30 '17 at 11:23
https://stackoverflow.com/questions/35280118/change-style-of-pseudo-elements-in-angular2 — Stephen Thomas, Jul 30 '17 at 11:39
https://stackoverflow.com/questions/42549294/angular-2-setting-pseudo-element-css — Stephen Thomas, Jul 30 '17 at 11:39
https://stackoverflow.com/questions/23293053/can-i-use-angularjs-directives-to-apply-a-style-to-a-pseudo-element — Stephen Thomas, Jul 30 '17 at 11:39
https://stackoverflow.com/questions/24498920/how-to-change-style-for-before-after-in-angular — Stephen Thomas, Jul 30 '17 at 11:39
https://stackoverflow.com/questions/30352514/how-to-set-the-css-of-the-libefore-with-ng-style — Stephen Thomas, Jul 30 '17 at 11:40
The styling is something like: `.checkbox input[type="checkbox"]:checked + label::before { color: #343434; }` — worxli, Jul 30 '17 at 12:21
@StephenThomas I can't find a solution in any of the link on how to set the color dynamically at runtime. E.g. I cannot add classes, because I don't know the color beforehand. — worxli, Jul 30 '17 at 12:25
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables would be a nice solution but still experimental. — worxli, Jul 30 '17 at 12:26
"I can't find a solution..." That's my point! A solution doesn't exist. A question that's been asked that many times and has no solution should be your first clue. — Stephen Thomas, Jul 30 '17 at 13:09

Angular2/4 Dynamic Checkbox/Radio Styling

0 Answers0