JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app="main">
  <ul :html.inline.scope="template:data">
    <li al-repeat="item in outer">
      <span @click="item.expand=!item.expand" :hidden="!item.children" style="cursor: pointer;">
        <i class="fa fa-{{item.expand?'minus':'plus'}}-square-o"></i> {{item.name}}
      </span>
      <span :hidden="item.children">{{item.name}}</span>
      <div al-if="item.expand">
        <ul :html.scope="template:item.children"></ul>
      </div>
    </li>
  </ul>  
</div>

TypeScript

alight.ctrl.main = function(scope) {
	// generate tree
	function makeList(name, c) {
  	return [1,2,3].map((_, i)=>{
    	return {name: `${name} ${i+1}`, children:c?c():null}
    })
  };

	scope.data = makeList('Tree node', ()=>makeList('Sub tree', ()=> makeList('Deeppest item')));
};