<p dir="auto">It would be great to have another possibility of template representation besides string. Inspired by React JSX/TSX, if there exists <code class="notranslate">AngularJSX</code> custom JSX factory (which creates JavaScript object tree, consumed by Angular as an alternative to string template) we can use JavaScript x Typescript template (see below). Both for inline and HTML templates. In the second case there could be e.g. <code class="notranslate">templateJsxUrl='./teplates/myTemplate.jsx'</code> component attribute:</p>
<h2 dir="auto">Pure JavaScript example:</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var AppComponent = function () {
  this.templateJsx = React.createElement(&quot;div&quot;, null, 
    React.createElement(&quot;h3&quot;, null, title), 
    this.items.map(function (it) { return this.displayItem(it); }), 
    this.okButton(this.doClick)
  );
  this.items = [1, 2, 3];
}
AppComponent.prototype.okButton = function (doClick) {
  return [
    AngularJSX.createElement(&quot;hr&quot;, null), 
    AngularJSX.createElement(&quot;div&quot;, {onClick: doClick}, &quot; OK&quot;)];
};
AppComponent.prototype.displayItem = function (it) {
     AngularJSX.createElement(&quot;span&quot;, null, it);
};"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">AppComponent</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">templateJsx</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> 
    <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"h3"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s1">title</span><span class="pl-kos">)</span><span class="pl-kos">,</span> 
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">items</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">it</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">displayItem</span><span class="pl-kos">(</span><span class="pl-s1">it</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> 
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">okButton</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">doClick</span><span class="pl-kos">)</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">items</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-v">AppComponent</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">okButton</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">doClick</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">[</span>
    <span class="pl-v">AngularJSX</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"hr"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">,</span> 
    <span class="pl-v">AngularJSX</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">onClick</span>: <span class="pl-s1">doClick</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s">" OK"</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-v">AppComponent</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">displayItem</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">it</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-v">AngularJSX</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"span"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s1">it</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Strictly typed Typescript example</h2>
<p dir="auto">if Angular accepts AngularJSX-like template representation, the rest is almost completely covered by Typescript 1.8., with all IDE benefits as refactoring, intellisence, syntax highlighting, auto-indent etc.</p>
<p dir="auto">Developer writes:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({selector: 'my-app'}
class AppComponent {
  templateJsx = &lt;div&gt;
    &lt;h3&gt;{ title } &lt;/h3&gt;
    { items.map(it =&gt; displayItem(it)) }
    { okButton(doClick) }
  &lt;/div&gt;;

  okButton(doClick: React.MouseEventHandler) {
    return [&lt;hr/&gt;, &lt;div onClick = { doClick }&gt; OK&lt;/div &gt;]
  }
  displayItem(it: any) {
    &lt;span&gt;{ it }&lt;/span&gt;
  }
  items = [1,2,3];
  doClick () { alert('onClick'); }
}
..."><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">}</span>
<span class="pl-k">class</span> <span class="pl-v">AppComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">templateJsx</span> <span class="pl-c1">=</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">h3</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span> <span class="pl-s1">title</span> <span class="pl-kos">}</span> <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h3</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span> <span class="pl-s1">items</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">it</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">displayItem</span><span class="pl-kos">(</span><span class="pl-s1">it</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">}</span>
    <span class="pl-kos">{</span> <span class="pl-en">okButton</span><span class="pl-kos">(</span><span class="pl-s1">doClick</span><span class="pl-kos">)</span> <span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

  <span class="pl-en">okButton</span><span class="pl-kos">(</span><span class="pl-s1">doClick</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">MouseEventHandler</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">[</span><span class="pl-c1">&lt;</span><span class="pl-ent">hr</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-s1">doClick</span> <span class="pl-kos">}</span><span class="pl-c1">&gt;</span> OK<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span> <span class="pl-c1">&gt;</span><span class="pl-kos">]</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">displayItem</span><span class="pl-kos">(</span><span class="pl-s1">it</span>: <span class="pl-s1">any</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span> <span class="pl-s1">it</span> <span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">}</span>
  <span class="pl-c1">items</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">2</span><span class="pl-kos">,</span><span class="pl-c1">3</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
  <span class="pl-en">doClick</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s">'onClick'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span></pre></div>
<p dir="auto">Typescript 1.8 transpiler generates:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="...
this.templateJsx = AngularJSX.createElement(&quot;div&quot;, null, 
  AngularJSX.createElement(&quot;h3&quot;, null, title, 
  this.items.map(function (it) { return this.displayItem(it); }), 
  this.okButton(this.doClick)
);
..."><pre class="notranslate">...
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">templateJsx</span> <span class="pl-c1">=</span> <span class="pl-v">AngularJSX</span><span class="pl-kos">.</span><span class="pl-c1">createElement</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> 
  <span class="pl-v">AngularJSX</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"h3"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s1">title</span><span class="pl-kos">,</span> 
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">items</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">it</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">displayItem</span><span class="pl-kos">(</span><span class="pl-s1">it</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> 
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">okButton</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">doClick</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>
...</pre></div>
<p dir="auto">For external template:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({selector: 'my-app'}
class AppComponent {
  templateJsxUrl = './teplates/myTemplate.jsx'
..."><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">}</span>
<span class="pl-k">class</span> <span class="pl-v">AppComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">templateJsxUrl</span> <span class="pl-c1">=</span> <span class="pl-s">'./teplates/myTemplate.jsx'</span>
<span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span></pre></div>
<p dir="auto"><code class="notranslate">AngularJSX.createElement</code> encodes template to JavaScript object tree consumed by Angular as an string alternative.</p>
<p dir="auto">It would be cool to support JSX like templates in angular 2. JSX can hold all required information required to generate the DOM at run time. Following are some benefits come with JSX to angular:</p>
<ol dir="auto">
<li>Type safety to catch errors at compile time</li>
<li>Better run time performance. No need to parse template string at run time. DOM info and may be AST can be serialized at compile time</li>
<li>Typescript already supports JSX and understands the syntax</li>
<li>More intelligence and easier refactoring support for IDEs when dealing with templates</li>
<li>Possibility to share component templates with React</li>
</ol>