<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/h02LVM8sPwKJ6ljDVShz?p=preview" rel="nofollow">http://plnkr.co/edit/h02LVM8sPwKJ6ljDVShz?p=preview</a></p>
<p dir="auto"><em>What steps should we try in your demo to see the problem?</em></p>
<p dir="auto">Should see right away</p>
<p dir="auto"><strong>Current behavior</strong><br>
when using a method along with [ngClass], debugging shows that the classes get applied correctly, but are then un-applied before the user can see them.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Returning an object to ngClass via a method should be the same as passing the object in directly from the template</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] feature request"><pre class="notranslate"><code class="notranslate">[x] feature request
</code></pre></div>
<p dir="auto"><strong>Problem</strong></p>
<blockquote>
<p dir="auto">Inspired by <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="198561459" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/13757" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/13757/hovercard" href="https://github.com/angular/angular/issues/13757">#13757</a></p>
</blockquote>
<p dir="auto">The template provided by an ancestor component is not useful to a descendant component since its content cannot be reference nor can it be used to build the descendant (even with <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="198596231" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/13764" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/13764/hovercard" href="https://github.com/angular/angular/issues/13764">#13764</a>). This limits the usefulness of inheritance as a model for building components.</p>
<p dir="auto"><strong>Proposal</strong></p>
<p dir="auto">Add a pseudo-element called <code class="notranslate">ng-descendant</code> that can be used analogously to <code class="notranslate">ng-content</code> except that the content is from the descendant class' template instead of instantiating template.</p>
<p dir="auto">Descendant components are required to use an <code class="notranslate">ng-extend</code> elements that contains the content that is projected into the ancestor template. If the descendant does not use an <code class="notranslate">ng-extend</code> element as the root element of its template then its template will replace the ancestor template instead of extending it.</p>
<p dir="auto"><strong>Example</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  template: `
    &lt;h1&gt;&lt;ng-descendant select=&quot;.header&quot;&gt;&lt;/ng-descendant&gt;&lt;/h1&gt;
    &lt;ng-descendant select=&quot;.body&quot;&gt;&lt;/ng-descendant&gt;
    &lt;div&gt;
      &lt;ng-descendant select=&quot;.footer&quot;&gt;&lt;/ng-descendant&gt;
    &lt;/div&gt;`
})
class BaseClass {
}

@Component({
  template: `
    &lt;ng-extend&gt;
      &lt;span class=&quot;header&quot;&gt;My Component&lt;/span&gt;
      &lt;span class=&quot;body&quot;&gt;Body of the component&lt;/span&gt;
      &lt;span class=&quot;footer&quot;&gt;Footer of the component&lt;/span&gt;
    &lt;/ng-extend&gt;`  
})
class MyComponent extends BaseClass {
}"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;h1&gt;&lt;ng-descendant select=".header"&gt;&lt;/ng-descendant&gt;&lt;/h1&gt;</span>
<span class="pl-s">    &lt;ng-descendant select=".body"&gt;&lt;/ng-descendant&gt;</span>
<span class="pl-s">    &lt;div&gt;</span>
<span class="pl-s">      &lt;ng-descendant select=".footer"&gt;&lt;/ng-descendant&gt;</span>
<span class="pl-s">    &lt;/div&gt;`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">BaseClass</span> <span class="pl-kos">{</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">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;ng-extend&gt;</span>
<span class="pl-s">      &lt;span class="header"&gt;My Component&lt;/span&gt;</span>
<span class="pl-s">      &lt;span class="body"&gt;Body of the component&lt;/span&gt;</span>
<span class="pl-s">      &lt;span class="footer"&gt;Footer of the component&lt;/span&gt;</span>
<span class="pl-s">    &lt;/ng-extend&gt;`</span>  
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">BaseClass</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">This would be interpreted as if <code class="notranslate">MyComponent</code> had been written as:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    template: `
    &lt;h1&gt;&lt;span class=&quot;header&quot;&gt;My Component&lt;/span&gt;&lt;/h1&gt;
    &lt;span class=&quot;body&quot;&gt;Body of the component&lt;/span&gt;
    &lt;div&gt;
       &lt;span class=&quot;footer&quot;&gt;Footer of the component&lt;/span&gt;
    &lt;/div&gt;`
})
class MyComponent extends BaseClass {
}"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;h1&gt;&lt;span class="header"&gt;My Component&lt;/span&gt;&lt;/h1&gt;</span>
<span class="pl-s">    &lt;span class="body"&gt;Body of the component&lt;/span&gt;</span>
<span class="pl-s">    &lt;div&gt;</span>
<span class="pl-s">       &lt;span class="footer"&gt;Footer of the component&lt;/span&gt;</span>
<span class="pl-s">    &lt;/div&gt;`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">BaseClass</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>