<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></p>
<p dir="auto">When a directive is attached to the DOM via <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostBinding/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostBinding">@HostBinding</a> decorator, it seems to not be active.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component, Directive, ElementRef, HostBinding } from '@angular/core';

@Directive({
  selector: '[ui-color]',
})
export class ColorDirective  {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'red';
  }
}

@Component({
  selector: 'test-cmp',
  template: `Should be red`,
})
export class TestComponent {
  @HostBinding('attr.ui-color') color = '';
}

@Component({
  selector: 'my-app',
  template: `
    &lt;test-cmp&gt;&lt;/test-cmp&gt;
    &lt;div ui-color&gt;Should be red&lt;/div&gt;
  `,
})
export class AppComponent {}

//Two text lines should be red"><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">Directive</span><span class="pl-kos">,</span> <span class="pl-smi">ElementRef</span><span class="pl-kos">,</span> <span class="pl-smi">HostBinding</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Directive</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'[ui-color]'</span><span class="pl-kos">,</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">ColorDirective</span>  <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">el</span>: <span class="pl-smi">ElementRef</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">nativeElement</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">backgroundColor</span> <span class="pl-c1">=</span> <span class="pl-s">'red'</span><span class="pl-kos">;</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">selector</span>: <span class="pl-s">'test-cmp'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`Should be red`</span><span class="pl-kos">,</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">TestComponent</span> <span class="pl-kos">{</span>
  @<span class="pl-smi">HostBinding</span><span class="pl-kos">(</span><span class="pl-s">'attr.ui-color'</span><span class="pl-kos">)</span> <span class="pl-c1">color</span> <span class="pl-c1">=</span> <span class="pl-s">''</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">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;test-cmp&gt;&lt;/test-cmp&gt;</span>
<span class="pl-s">    &lt;div ui-color&gt;Should be red&lt;/div&gt;</span>
<span class="pl-s">  `</span><span class="pl-kos">,</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">AppComponent</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

<span class="pl-c">//Two text lines should be red</span></pre></div>
<p dir="auto">The problem is also reproduced with modules: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="198187206" data-permission-text="Title is private" data-url="https://github.com/angular/flex-layout/issues/76" data-hovercard-type="issue" data-hovercard-url="/angular/flex-layout/issues/76/hovercard" href="https://github.com/angular/flex-layout/issues/76">angular/flex-layout#76</a></p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Directive should be active when injected via <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/HostBinding/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/HostBinding">@HostBinding</a> decorator.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="https://plnkr.co/edit/j5MSVP5pIRjTTK9D2LsS" rel="nofollow">https://plnkr.co/edit/j5MSVP5pIRjTTK9D2LsS</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X | 4.0.X</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all]</p>
</li>
</ul>
<p dir="auto">Possible bug with <code class="notranslate">slice</code> in <code class="notranslate">alpha.55</code> and <code class="notranslate">beta 0</code> … was there a change with slice recently?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
The app gets a list and then slices them. No changes are made on load.

The app works without slice.

// cc @wardbell"><pre lang="angular2.dev.js:23524" class="notranslate"><code class="notranslate">
The app gets a list and then slices them. No changes are made on load.

The app works without slice.

// cc @wardbell
</code></pre></div>