<p dir="auto">I have a following class</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class AddAnimalComponent {
  public st: string;
  public dyn: string;
  public errMessage: string;
  @Output() added = new EventEmitter&lt;Animal&gt;();

  constructor() {
  }

  add() {
    throw new Error('Not implemented');
  }

  clearErr() {
    this.errMessage = '';
  }

  normalize() {
    this.st = this.st.trim();
    if (this.dyn) {
      this.dyn = this.dyn.trim();
    }
  }

  clear() {
    this.clearErr();
    this.st = '';
    if (this.dyn) {
      this.dyn = '';
    }
  }
}"><pre class="notranslate"><code class="notranslate">export class AddAnimalComponent {
  public st: string;
  public dyn: string;
  public errMessage: string;
  @Output() added = new EventEmitter&lt;Animal&gt;();

  constructor() {
  }

  add() {
    throw new Error('Not implemented');
  }

  clearErr() {
    this.errMessage = '';
  }

  normalize() {
    this.st = this.st.trim();
    if (this.dyn) {
      this.dyn = this.dyn.trim();
    }
  }

  clear() {
    this.clearErr();
    this.st = '';
    if (this.dyn) {
      this.dyn = '';
    }
  }
}
</code></pre></div>
<p dir="auto">And then a subclass:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'add-expansion',
  templateUrl: './templates/add-expansion.html',
  directives: [MultiValueInput]
})

export class AddExpansionComponent extends AddAnimalComponent implements AfterViewInit {
  //@Input('expansion') expansionType: string;

  constructor(private _animalService: AnimalService,
              @Inject('App.constants') private constants,
              private toastr: ToastsManager
  ) {
    super();
  }

  ngAfterViewInit() {
    //if (!this.expansionType) {
    //  throw new Error('No expansion synonym type specified.');
    //}
  }

  add() {
    this.clearErr();
    this.normalize();

    if (this.st &amp;&amp; this.st.length) {
      let abbr = new Animal(this.st);
      this._animalService.addAnimal(this.constants.activePartner, 'expansion-synonym', abbr)
        .subscribe((data) =&gt; {
            if (!data.success) {
              this.toastr.error(data.error, 'Oops');
              if (data.result) {
                this.errMessage = 'Existed: ' + JSON.stringify(data.result[0]);
              }
            } else {
              abbr = new Animal(data.result.st, data.result.dyn, data.result._id, data.result.status, data.result.action, data.result.newdyn);
              this.added.emit(abbr);
              this.clear();
            }
          },
          (err) =&gt; { this.errMessage = `Oops, server error: ${err}`; }
        );

    }
  }

  onDuplicate(item) {
    this.toastr.warning(`You have entered '${item}' more than once.`);
  }

}"><pre class="notranslate"><code class="notranslate">@Component({
  selector: 'add-expansion',
  templateUrl: './templates/add-expansion.html',
  directives: [MultiValueInput]
})

export class AddExpansionComponent extends AddAnimalComponent implements AfterViewInit {
  //@Input('expansion') expansionType: string;

  constructor(private _animalService: AnimalService,
              @Inject('App.constants') private constants,
              private toastr: ToastsManager
  ) {
    super();
  }

  ngAfterViewInit() {
    //if (!this.expansionType) {
    //  throw new Error('No expansion synonym type specified.');
    //}
  }

  add() {
    this.clearErr();
    this.normalize();

    if (this.st &amp;&amp; this.st.length) {
      let abbr = new Animal(this.st);
      this._animalService.addAnimal(this.constants.activePartner, 'expansion-synonym', abbr)
        .subscribe((data) =&gt; {
            if (!data.success) {
              this.toastr.error(data.error, 'Oops');
              if (data.result) {
                this.errMessage = 'Existed: ' + JSON.stringify(data.result[0]);
              }
            } else {
              abbr = new Animal(data.result.st, data.result.dyn, data.result._id, data.result.status, data.result.action, data.result.newdyn);
              this.added.emit(abbr);
              this.clear();
            }
          },
          (err) =&gt; { this.errMessage = `Oops, server error: ${err}`; }
        );

    }
  }

  onDuplicate(item) {
    this.toastr.warning(`You have entered '${item}' more than once.`);
  }

}
</code></pre></div>
<p dir="auto">When I have <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a> expansionType defined, the line<br>
<code class="notranslate">this.added.emit(abbr);</code> is not emitting any events. However, once I got all expansionType commented, the emit works.</p>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> bug report =&gt; search github for a similar issue or PR before submitting</li>
</ul>
<p dir="auto"><strong>Current behavior</strong><br>
[ngStyle] is ignored when using a dynamic component</p>
<p dir="auto"><strong>Expected behavior</strong><br>
[ngStyle] should not be ignored</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Using the quick start, here are the relevant changes (I couldn't find a ready to use plunker I can duplicate and share...)<br>
Add a dynamic component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: &quot;dynamic&quot;,
    template: `&lt;div [ngStyle]=&quot;{color: 'red'}&quot;&gt;Red&lt;/div&gt;`
})
export class DynamicComponent { }"><pre class="notranslate">@<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">"dynamic"</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">`&lt;div [ngStyle]="{color: 'red'}"&gt;Red&lt;/div&gt;`</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">DynamicComponent</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto">in app.component.ts:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-app',
  template: `&lt;h1 [ngStyle]=&quot;{color: 'red' }&quot;&gt;Hello {{name}}&lt;/h1&gt;`
})
export class AppComponent { 
  name = 'Angular'; 
  constructor(private injector: Injector,
  private componentFactoryResolver: ComponentFactoryResolver,) {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    let divComp = document.getElementById(&quot;thisOne&quot;);
    componentFactory.create(this.injector, [], divComp);
  }
}"><pre class="notranslate">@<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">`&lt;h1 [ngStyle]="{color: 'red' }"&gt;Hello {{name}}&lt;/h1&gt;`</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-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">'Angular'</span><span class="pl-kos">;</span> 
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-k">private</span> <span class="pl-s1">injector</span>: <span class="pl-smi">Injector</span><span class="pl-kos">,</span>
  <span class="pl-k">private</span> <span class="pl-s1">componentFactoryResolver</span>: <span class="pl-smi">ComponentFactoryResolver</span><span class="pl-kos">,</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">componentFactory</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">componentFactoryResolver</span><span class="pl-kos">.</span><span class="pl-en">resolveComponentFactory</span><span class="pl-kos">(</span><span class="pl-smi">DynamicComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">let</span> <span class="pl-s1">divComp</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"thisOne"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">componentFactory</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">injector</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">divComp</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">in index.html add a div and remove all existing styles:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;body&gt;
    &lt;div id=&quot;thisOne&quot;&gt;&lt;/div&gt;
    &lt;my-app&gt;Loading AppComponent content here ...&lt;/my-app&gt;
  &lt;/body&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">thisOne</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">my-app</span><span class="pl-kos">&gt;</span>Loading AppComponent content here ...<span class="pl-kos">&lt;/</span><span class="pl-ent">my-app</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">This is what I get:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3269297/25746236/3e95b6c8-31ab-11e7-996c-1c37c9e14c52.png"><img src="https://cloud.githubusercontent.com/assets/3269297/25746236/3e95b6c8-31ab-11e7-996c-1c37c9e14c52.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">the word "red" should be in red color I believe, unless I did something wrong.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
I'm using visual studio, but I don't think it matters here as I was able to reproduce it in a plunker that I can't share for some reason...</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.0.3</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> checked on Chrome, but probably all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.2.1 | ES6</p>
</li>
</ul>