Markdown

<div elm module="Markdown"></div>
                    

Mouse Position React!

<div elm module="MousePosition" class="block"></div>
                    

Text Field React!

<div elm module="TextField" ></div>
                    

Text Field React with an Output Port!

<div elm module="TextField" ports="textFieldPorts"></div>
<span>Angular textOutput: { {textOutput} }</span>
                    

JS

scope.textFieldPorts = {};
scope.textFieldPorts.textOutput = function (value) {
    scope.textOutput = value;
}
                    

Angular -> Elm

<div elm module="AngularInput"
            ports-in="{inputText: 'Hello from AngularJS'}"></div>
                    

Angular -> Elm with React!

<div elm module="AngularInput"
            ports-in="{inputText: 'Hello from AngularJS'}"></div>
<button ng-click="setInputText('Send from button')">Send</button>
                    

JS

scope.setInputText = function(value) {
    scope.ngToElmPorts.inputText = value +
                                   '@' +
                                   new Date().toString();
};