title: Angular - unwrap Component template
body: <p>Edit: interesting discussion on <a href="https://github.com/angular/angular/issues/7857" rel="nofollow noreferrer">GitHub - Angular</a> </p>
  
  <p>Currently I have a <code>@Component</code>'s template such as</p>
  
  <pre class="lang-html prettyprint-override"><code>selector: 'app-input',
  template: `
    &lt;nz-form-item&gt;
      &lt;nz-form-control [nzSm]="14" [nzXs]="24"&gt;
        &lt;input [formControl]="formControl"&gt;
      &lt;/nz-form-control&gt;
    &lt;/nz-form-item&gt;
  `,
  </code></pre>
  
  <p>This <code>@Component</code> is then used as</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form nz-form [formGroup]="formGroup"&gt;
    &lt;app-input [formControlName]="name"&gt;&lt;/app-input&gt;
    &lt;app-input [formControlName]="code"&gt;&lt;/app-input&gt;
    ...
  </code></pre>
  
  <p>However, the NG-ZORRO styles are correctly applied only when the <code>nz-form-item</code> is directly nested under <code>nz-form</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form nz-form ...
    &lt;nz-form-item ...
  </code></pre>
  
  <p>As of now, instead, the layout is</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form nz-form ...
    &lt;app-input ...
      &lt;nz-form-item ...
  </code></pre>
  
  <p>Is there a way to <em>un-wrap</em> the <code>app-input</code> template?<br>
  Or, is there an alternative approach to go for?</p>