<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
In Hybrid  mode (when using upgradeAdapter.bootstrap()), <code class="notranslate">&lt;ng-content&gt;</code> doesn't work if placed inside an <code class="notranslate">*ngIF</code></p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
it should be possible to include the light DOM children conditionally using *ngIF</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Here is the plunk : <a href="https://plnkr.co/edit/LaNrcc?p=preview" rel="nofollow">https://plnkr.co/edit/LaNrcc?p=preview</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
it should be possible to include the light DOM children conditionally using *ngIF</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Due to this bug, it's not possible to include the light DOM children conditionally.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.1</li>
<li><strong>Browser:</strong> [Chrome XX ]<br>
Tested in Chrome Version 51.0.2704.103 m</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5 | Dart]<br>
<a href="https://code.angularjs.org/tools/typescript.js" rel="nofollow">https://code.angularjs.org/tools/typescript.js</a></li>
</ul>
<p dir="auto">When there is <code class="notranslate">&lt;ng-content&gt;</code> tag in <code class="notranslate">&lt;template&gt;</code>, the component could not been correctly downgraded.</p>
<p dir="auto">During initialization, the <code class="notranslate">&lt;ng-content&gt;</code> inside a <code class="notranslate">&lt;template&gt;</code> may corresponds to no element in DOM. <code class="notranslate">DowngradeNg2ComponentAdapter.contentInsertionPoint.parentNode</code> is <code class="notranslate">null</code>. After  has been rendered into DOM, DowngradeNg2ComponentAdapter.prototype.projectContent won't been triggered again. So Angular 1 contents won't get projected after initialization.
</p><p dir="auto">For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    @Component({
        selector: 'cannot-be-downgraded',
        template: `
            &lt;div *ngIf=&quot;show&quot;&gt;
                &lt;ng-content&gt;&lt;/ng-content&gt;
            &lt;/div&gt;`
    })
    export class CannotBeDowngraded {
        @Input() show: boolean = false;
    }"><pre class="notranslate"><code class="notranslate">    @Component({
        selector: 'cannot-be-downgraded',
        template: `
            &lt;div *ngIf="show"&gt;
                &lt;ng-content&gt;&lt;/ng-content&gt;
            &lt;/div&gt;`
    })
    export class CannotBeDowngraded {
        @Input() show: boolean = false;
    }
</code></pre></div><p></p>