AngularJS + HTML5 + CSS = Magic

AngularJS allows you to do amazing things, couple that with HTML5 and CSS and it's borderline magic.

HTML5 has an new color input ability, this allows us to choose colors, which returns the color code as text.



Current selection: {{bgcolor}}

One of the features of Angular is real time updating. This allows for dynamic data. Try the example below.

AngularJS is {{input}}



Now if we couple that with HTML5 and some CSS we get this, as you've seen above:



Pretty Cool! Color: {{boxcolor}}



Using Angular's dynamic entity abilities we are able to control the CSS style of this box. Take it a step further and we can control ANY CSS value we want (just has to be in the <style> tags on the page). Here's a few more examples.

Font Color

Font Size


CSS

The CSS can be used in-line like such

<span style="color:{{fontcolor}}">Font Color</span>  

Or in style tags like such

<style>  
.class {
  background-color: {{color}};
};
»