JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
<my-app></my-app>

JavaScript

var AppComponent = ng.Component({
    selector: 'my-app',
    directives: [TestComponent()],
    template: '<h1>My First Angular 2 App</h1>' +
        '<test></test>' +
        '<test-title>title</test-title>' +
        '<test-content>content</test-content>'
})
    .Class({
    constructor: function () {
        this.items = ['test1', 'test2'];
    },
    myControllerMethod: function (e) {
        if (e.keyIdentifier === 'Enter') {
            this.items.push(e.target.value);
            e.target.value = '';
        }
    }
});

function TestComponent() {
    return ng.Component({
        selector: 'test',
        directives: [ng.NgFor],
        template: '<ul><li *ng-for="#item of items">{{item}}' +
            '<ng-content select="test-title"/>' +
            '</li></ul>' +
            '<input (keyup)="myControllerMethod($event)">' +
            '<ng-content select="test-content"/>'
    })
        .Class({
        constructor: function () {
            this.items = ['test1', 'test2'];
        },
        myControllerMethod: function (e) {
            if (e.keyIdentifier === 'Enter') {
                this.items.push(e.target.value);
                e.target.value = '';
            }
        }
    });
}

document.addEventListener('DOMContentLoaded', function () {
    ng.bootstrap(AppComponent);
});