1

Edit: interesting discussion on GitHub - Angular

Currently I have a @Component's template such as

selector: 'app-input',
template: `
  <nz-form-item>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input [formControl]="formControl">
    </nz-form-control>
  </nz-form-item>
`,

This @Component is then used as

<form nz-form [formGroup]="formGroup">
  <app-input [formControlName]="name"></app-input>
  <app-input [formControlName]="code"></app-input>
  ...

However, the NG-ZORRO styles are correctly applied only when the nz-form-item is directly nested under nz-form

<form nz-form ...
  <nz-form-item ...

As of now, instead, the layout is

<form nz-form ...
  <app-input ...
    <nz-form-item ...

Is there a way to un-wrap the app-input template?
Or, is there an alternative approach to go for?

LppEdd
  • 20,274
  • 11
  • 84
  • 139
  • 2
    Check this https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag – taras-d Mar 21 '19 at 13:13
  • @taras-d thanks! This seems an updated version https://stackoverflow.com/questions/46671235/remove-host-component-tag-from-html-in-angular-4 – LppEdd Mar 21 '19 at 13:17
  • @taras-d however, I'd have to keep the `nz-form-item` external to the `app-input` component – LppEdd Mar 21 '19 at 13:18

0 Answers0