<p dir="auto">We have a library of components for angular that we are currently migrating to Angular 2. We have a container that injects content using <code class="notranslate">ng-content</code>. We would like to have a child component that injects the parent if you nest it inside of the parent, like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;parent&gt;
    &lt;child&gt;&lt;/child&gt;
&lt;/parent&gt;"><pre class="notranslate"><code class="notranslate">&lt;parent&gt;
    &lt;child&gt;&lt;/child&gt;
&lt;/parent&gt;
</code></pre></div>
<p dir="auto">This works beautifully in angular 2. However, since are in the process of migration, we would like to use the ngUpgrade adapter for this. The dependency injection seems to fail if the parent and child are specified in an angular 1 context. Any insights on this issue? Is this something that is going to be supported in the ngUpgrade adapter?</p>
<p dir="auto">I have a working plunker that illustrates the problem:</p>
<p dir="auto"><a href="http://plnkr.co/edit/9qb6ZK9SpJyrWoJDEFEj?p=preview" rel="nofollow">http://plnkr.co/edit/9qb6ZK9SpJyrWoJDEFEj?p=preview</a></p>
<p dir="auto">In both cases, the template includes a parent with the child <code class="notranslate">transcluded/projected</code> into it. The child tries to inject the parent and then calls a function on it when you press the button. The ng2 example works, but not the ng1/ngUpgrade version.</p>
<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 =&gt; search github for a similar issue or PR before submitting
[ ] 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 =&gt; search github for a similar issue or PR before submitting
[ ] 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>
After implementing <code class="notranslate">ControlValueAccessor</code> to the component, <code class="notranslate">ngOnInit</code> can no longer set a default value for <code class="notranslate">this.model</code>. No matter what I do it does not update the component view or notify outside components of the change.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
<code class="notranslate">ngOnInit</code> would update the view and notify outside components of the change.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ol dir="auto">
<li>Open console</li>
<li>Check the message (this is the default model set by <code class="notranslate">ngOnInit</code></li>
<li>Check the <code class="notranslate">pre</code> elements in the template (you will see <code class="notranslate">null</code> for the component template and <code class="notranslate">''</code> for the outside one), both of these should display <code class="notranslate">{id: 0, name: 'Item 1'}</code> but does not.</li>
</ol>
<p dir="auto">Demo:<br>
<a href="https://plnkr.co/edit/gGCiYjcq70xaewn3n22F?p=preview" rel="nofollow">https://plnkr.co/edit/gGCiYjcq70xaewn3n22F?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
This is needed when writing custom form elements and you want a default value without having to set a default value in the outside model, the component should take care of that.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OS X Sierra, using the latest Angular CLI version.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
Fails on both 2.0.2 and 2.1.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
typescript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>