<p dir="auto"><strong>I'm submitting a ...</strong></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></p>

<p dir="auto">Component's and directive's initialization occur in declaration order. This can lead to the loss of a directives specific host binding such as <code class="notranslate">@HostBinding('class.specific') classSpecific = true;</code>, when a component "blanket" binds the same parent attribute such as <code class="notranslate">@HostBinding('class') classList = '';</code>.</p>
<p dir="auto"><em>Component overwrites directive specified attributes</em></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@NgModule({
  declarations: [
    MyDirective,
    MyComponent,
  ],
})"><pre class="notranslate">@<span class="pl-smi">NgModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">declarations</span>: <span class="pl-kos">[</span>
    <span class="pl-smi">MyDirective</span><span class="pl-kos">,</span>
    <span class="pl-smi">MyComponent</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"><em>Component writes blanket attributes and directive extends these attributes</em></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@NgModule({
  declarations: [
    MyComponent,
    MyDirective,
  ],
})"><pre class="notranslate">@<span class="pl-smi">NgModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">declarations</span>: <span class="pl-kos">[</span>
    <span class="pl-smi">MyComponent</span><span class="pl-kos">,</span>
    <span class="pl-smi">MyDirective</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"><strong>Expected behavior</strong></p>

<p dir="auto">In my opinion directives should be treated as an extensions of a component's functionallity and therefore initialize after said component. This should also take into account modules and their declaration/import order should not change behavior.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://plnkr.co/edit/iOF42haUAv379suApgS4?p=preview" rel="nofollow">https://plnkr.co/edit/iOF42haUAv379suApgS4?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Consistency and by extension stability. In our use-case we recieve a list of classes from the back-end (or another source) which we want to bind to the component host container's class list to avoid uneccessary nesting. In addition we also want to have directives that specifically affect the component without being overwritten.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.1</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> all</li>
</ul>

<ul dir="auto">
<li><strong>Language:</strong> all</li>
</ul>
<p dir="auto">Say a user wants to add margin around a component:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;cool-thing class=&quot;extra-margin&quot;&gt; ... "><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">cool-thing</span> <span class="pl-c1">class</span>="<span class="pl-s">extra-margin</span>"<span class="pl-kos">&gt;</span> ... </pre></div>
<p dir="auto">But the component itself has need to set a dynamic CSS class to the host element:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  ...
  host: { '[class]': 'myCustomStyle' }
})
class CoolThing {
  myCustomStyle: string = figureOutWhichClassToUse();
}"><pre class="notranslate">@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  ...
  <span class="pl-s1">host</span>: <span class="pl-kos">{</span> <span class="pl-s">'[class]'</span>: <span class="pl-s">'myCustomStyle'</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">CoolThing</span> <span class="pl-kos">{</span>
  <span class="pl-c1">myCustomStyle</span>: <span class="pl-smi">string</span> <span class="pl-c1">=</span> <span class="pl-en">figureOutWhichClassToUse</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">Doing this in the component will completely overwrite the <code class="notranslate">class</code> property, wiping away the user's classes.</p>
<p dir="auto">In other situations, <code class="notranslate">NgClass</code> serves this purpose, but a component cannot apply a directive to its host element. Using the <code class="notranslate">[class.whatever]</code> syntax also doesn't solve this, as the <code class="notranslate">whatever</code> is the variable part.</p>
<h3 dir="auto">Proposal</h3>
<p dir="auto">Each component can, conceptually, have two distinct <code class="notranslate">class</code> lists: one that is from the user and one that comes from the component itself. These could be resolved independently with Angular rendering the union. Any time the user uses <code class="notranslate">ngClass</code> or the <code class="notranslate">[class.whatever]</code> syntax, it should override whatever is set to "class".</p>
<p dir="auto">cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a></p>