Angular2 Component Selectors

<!DOCTYPE html>
<html>

  <head>
    <script data-require="traceur-runtime@*" data-semver="0.0.88" src="https://cdn.rawgit.com/google/traceur-compiler/d3d0553de3315398a956dc2f9edd6a982d786b0a/bin/traceur-runtime.js"></script>
    <script src="https://jspm.io/system.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
  </head>

<body>
	<h1>Angular2 Component Selectors</h1>
	<my-app></my-app>
	<script>
		System.import('./app');
	</script>

</body>

</html>

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';


// Generic field component used when more specific ones don't match
@Component({
	selector: 'field',
	properties: ['type: type']
})
@View({
	template: `<div>{{caption}}: {{value}}</div>`
})
class FieldComponent {
	type: string;
	constructor() { }
}

// specific field component to use for boolean fields
@Component({
	selector: '[type=bool]',
	properties: ['type: type']
})
@View({
	template: `<input type="checkbox" [id]="id" [checked]="value==1"></input>`
})
class BooleanComponent {
	type: string;
	constructor() { }
}



@Component({
	selector: 'my-app'
})
@View({
	template: `
		<section>
			<div *ng-for="#field of fields">
				<field></field>
			</div>
		</section>
	`,
	directives: [NgFor, FieldComponent, BooleanComponent]
})
class SectionComponent {
	fields: Array<Field>;
	constructor() {
		this.fields = [
			{
				"id": 1,
				"type": "text",
				"caption": "Name",
				"value": "Bob"
			},
			{
				"id": 2,
				"type": "bool",
				"caption": "Over 24?",
				"value": 0
			},
			{
				"id": 3,
				"type": "options",
				"options": ["M", "F"],
				"caption": "Gender",
				"value": "M"
			}
		];
	}
}




class Field {
	id: number;
	type: string;
	caption: string;
	value: Object;
}

bootstrap(SectionComponent);

if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
if (typeof __metadata !== "function") __metadata = function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var angular2_1 = require('angular2/angular2');
// Generic field component used when more specific ones don't match
var FieldComponent = (function () {
    function FieldComponent() {
    }
    FieldComponent = __decorate([
        angular2_1.Component({
            selector: 'field',
            properties: ['type: type']
        }),
        angular2_1.View({
            template: "<div>{{caption}}: {{value}}</div>"
        }), 
        __metadata('design:paramtypes', [])
    ], FieldComponent);
    return FieldComponent;
})();
// specific field component to use for boolean fields
var BooleanComponent = (function () {
    function BooleanComponent() {
    }
    BooleanComponent = __decorate([
        angular2_1.Component({
            selector: '[type=bool]',
            properties: ['type: type']
        }),
        angular2_1.View({
            template: "<input type=\"checkbox\" [id]=\"id\" [checked]=\"value==1\"></input>"
        }), 
        __metadata('design:paramtypes', [])
    ], BooleanComponent);
    return BooleanComponent;
})();
var SectionComponent = (function () {
    function SectionComponent() {
        this.fields = [
            {
                "id": 1,
                "type": "text",
                "caption": "Name",
                "value": "Bob"
            },
            {
                "id": 2,
                "type": "bool",
                "caption": "Over 24?",
                "value": 0
            },
            {
                "id": 3,
                "type": "options",
                "options": ["M", "F"],
                "caption": "Gender",
                "value": "M"
            }
        ];
    }
    SectionComponent = __decorate([
        angular2_1.Component({
            selector: 'my-app'
        }),
        angular2_1.View({
            template: "\n\t\t<section>\n\t\t\t<div *ng-for=\"#field of fields\">\n\t\t\t\t<field></field>\n\t\t\t</div>\n\t\t</section>\n\t",
            directives: [angular2_1.NgFor, FieldComponent, BooleanComponent]
        }), 
        __metadata('design:paramtypes', [])
    ], SectionComponent);
    return SectionComponent;
})();
var Field = (function () {
    function Field() {
    }
    return Field;
})();
angular2_1.bootstrap(SectionComponent);