AngularJS + CSS: best practice for a live preview?

Question

I've a textfield with a hex-color as it's value. I'd like to display the impact live, e.g. by changing the body's background-color.

The code works but feels wrong/dirty. I'd like to avoid jQuery's .css() and follow the angular principles.

<div data-ng-app>    
    <span data-ng-init="colors.bg='#00FF00';"/>

    <style type="text/css">
    body {
        background: {{colors.bg}}; <!-- dirty ?! -->
    }
    </style>

    <input type="text" data-ng-model="colors.bg"/> 
</div>

Does anyone know a good/clean solution? Thanks in advance!

This might help http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs hint use : ng-style — Sven van den Boogaart, Sep 28 '16 at 12:48
You could use a change event on your input and use an ng-style on your body tag? — Matheno, Sep 28 '16 at 12:58
@SvenB Please post it as an answer and I'll accept it. Thanks! — Mr. B., Oct 20 '16 at 15:42

score 2 · Accepted Answer · answered Oct 21 '16 at 10:59

2

You could use a change event on your input and use an ng-style on your body tag

answered Oct 21 '16 at 10:59

Sven van den Boogaart

11,833
21
86
169

AngularJS + CSS: best practice for a live preview?

1 Answers1