web analytics

AngularJS + HTML5 + CSS = Magic


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

Try this:

HTML5

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

<input type="color">  

AngularJS

One of the features of AngularJS is real time updating, which allows for dynamic data. This is called "data binding" and is a key feature in AngularJS.

Try the examples below!

AngularJS is {{input}}


Now if we couple that with HTML5's color input and CSS, we get this:

Pretty Cool!
Color: {{color}}

CSS

Using Angular's data binding abilities we are able to control the CSS style of the 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).

Like this

{{color3}}

To do this we simply add a <style> tag to our html, and our CSS values are replaced with Angular entities and Angular does the rest.

html {
  background: {{color}};
}


Here's a few more examples.

Font Color

Font Size

comments powered by Disqus