web analytics

Adventures In TechLand

{ My Journey Through Technology }

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 has an new color input ability, this allows us to choose colors, which returns the color code as text.

<input type="color">  


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}}


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


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

Subscribe with a reader
Subscribe via email
comments powered by Disqus