<p dir="auto">Hi, please help me understand why this component is not working as intended?<br>
Of the two use cases is working only case 2...</p>
<h2 dir="auto">Source</h2>
<p dir="auto"><strong>component</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component, Input} from 'angular2/core';

@Component({
    selector: 'c12-viewport-footer',
    templateUrl: 'viewport-footer.html'
})
export class ViewportFooterComponent {
   @Input()
   button: boolean = false;
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">,</span> <span class="pl-smi">Input</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'c12-viewport-footer'</span><span class="pl-kos">,</span>
    <span class="pl-c1">templateUrl</span>: <span class="pl-s">'viewport-footer.html'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">ViewportFooterComponent</span> <span class="pl-kos">{</span>
   @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
   <span class="pl-c1">button</span>: <span class="pl-smi">boolean</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>view</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;c12-viewport__footer&quot; [ngClass]=&quot;{'c12-viewport__footer--button': button}&quot;&gt;
    &lt;template [ngIf]=&quot;!button&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/template&gt;
   &lt;template [ngIf]=&quot;button&quot;&gt;
      &lt;button class=&quot;...&quot;&gt;
         &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/button&gt;
    &lt;/template&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">c12-viewport__footer</span>" <span class="pl-c1">[ngClass]</span>="<span class="pl-s">{'c12-viewport__footer--button': button}</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">[ngIf]</span>="<span class="pl-s">!button</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">ng-content</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">ng-content</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">[ngIf]</span>="<span class="pl-s">button</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>
         <span class="pl-kos">&lt;</span><span class="pl-ent">ng-content</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">ng-content</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<h2 dir="auto">Example use</h2>
<p dir="auto"><strong>Case 1</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;c12-viewport&gt;
   ...
   &lt;c12-viewport-footer&gt;
      SOME_HTML_CONTENT
   &lt;/c12-viewport-footer&gt;
&lt;c12-viewport&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">c12-viewport</span><span class="pl-kos">&gt;</span>
   ...
   <span class="pl-kos">&lt;</span><span class="pl-ent">c12-viewport-footer</span><span class="pl-kos">&gt;</span>
      SOME_HTML_CONTENT
   <span class="pl-kos">&lt;/</span><span class="pl-ent">c12-viewport-footer</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">c12-viewport</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Case 2</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;c12-viewport&gt;
   ...
   &lt;c12-viewport-footer [button]=&quot;true&quot;&gt;
      SOME_TEXT_CONTENT
   &lt;/c12-viewport-footer&gt;
&lt;c12-viewport&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">c12-viewport</span><span class="pl-kos">&gt;</span>
   ...
   <span class="pl-kos">&lt;</span><span class="pl-ent">c12-viewport-footer</span> <span class="pl-c1">[button]</span>="<span class="pl-s">true</span>"<span class="pl-kos">&gt;</span>
      SOME_TEXT_CONTENT
   <span class="pl-kos">&lt;/</span><span class="pl-ent">c12-viewport-footer</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">c12-viewport</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">version: <code class="notranslate">ng2-beta12</code><br>
For some reason the order in which templates are defined is causing issues with transclusion.</p>
<p dir="auto"><a href="http://plnkr.co/edit/OmMGa65bNfrrQn0i5Wwm?p=preview" rel="nofollow">Doesn't Work for buttons but works for link</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template [ngIf]=&quot;href ===''&quot;&gt;
    &lt;button [ngClass]=&quot;cssClassList&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;
&lt;template [ngIf]=&quot;href !==''&quot;&gt;
    &lt;a [ngClass]=&quot;cssClassList&quot; href=&quot;href&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template [ngIf]="href ===''"&gt;
    &lt;button [ngClass]="cssClassList"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;
&lt;template [ngIf]="href !==''"&gt;
    &lt;a [ngClass]="cssClassList" href="href"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2133184/14080610/46e6e0a0-f4d4-11e5-9317-4acd79f61101.png"><img src="https://cloud.githubusercontent.com/assets/2133184/14080610/46e6e0a0-f4d4-11e5-9317-4acd79f61101.png" alt="screen shot 2016-03-28 at 10 59 34 am" style="max-width: 100%;"></a></p>
<p dir="auto"><a href="http://plnkr.co/edit/ccpnmdnU53B5JqZMBnxP?p=preview" rel="nofollow">Works for buttons but not for links</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template [ngIf]=&quot;href !==''&quot;&gt;
    &lt;a [ngClass]=&quot;cssClassList&quot; href=&quot;href&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;
&lt;template [ngIf]=&quot;href ===''&quot;&gt;
    &lt;button [ngClass]=&quot;cssClassList&quot;&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template [ngIf]="href !==''"&gt;
    &lt;a [ngClass]="cssClassList" href="href"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/a&gt;
&lt;/template&gt;
&lt;template [ngIf]="href ===''"&gt;
    &lt;button [ngClass]="cssClassList"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;
&lt;/template&gt;
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2133184/14080621/57ccd636-f4d4-11e5-8f57-e5c8fbb856ee.png"><img src="https://cloud.githubusercontent.com/assets/2133184/14080621/57ccd636-f4d4-11e5-8f57-e5c8fbb856ee.png" alt="screen shot 2016-03-28 at 10 59 46 am" style="max-width: 100%;"></a></p>