Hi, I need one help. Can you please help me to convert the following ngx template to ngx directive? Thanks in advance. I am getting JSON parsing error .

[Souvik93]

 <div class="builder-source" fxFlex="20%">
          <h4>Source</h4>

          <ngx-dnd-container
            class="root-container"
            [model]="sourceBuilderTools"
            [dropZones]="['builder-target']"
            [copy]="true"
            [droppableItemClass]="droppableItemClass"
            (drag)="builderDrag($event)">

            <ng-template let-item="model">
              <ngx-icon [fontIcon]="item.icon"></ngx-icon>
              {{item.name}}
            </ng-template>
          </ngx-dnd-container>

        </div>
        <div class="builder-target" fxFlex="60%">
          <h4>Target</h4>

          <ngx-dnd-container
            class="root-container"
            [model]="targetBuilderTools"
            dropZone="builder-target"
            [removeOnSpill]="true"
            [droppableItemClass]="droppableItemClass"
            (drag)="log($event)"
            (drop)="log($event)"
            (over)="log($event)"
            (out)="log($event)"
            (remove)="log($event)">

            <ng-template let-model="model" let-template="template">
              <div [ngSwitch]="model.inputType">
                <div *ngSwitchCase="'section'">
                   <ngx-section class="shadow" [sectionTitle]="model.name">
                     <ngx-dnd-container
                       dropZone="builder-target"
                       [model]="model.children"
                       [removeOnSpill]="true"
                       [template]="template"
                       [droppableItemClass]="droppableItemClass"
                       (drag)="log($event)"
                       (drop)="log($event)"
                       (over)="log($event)"
                       (out)="log($event)"
                       (remove)="log($event)">
                     </ngx-dnd-container>
                   </ngx-section>
                </div>
                <div *ngSwitchDefault>
                  <ngx-input
                    [type]="model.inputType"
                    [hint]="model.name"
                    [autofocus]="false"
                    [ngModel]="model.data">
                  </ngx-input>
                </div>
              </div>
            </ng-template>
          </ngx-dnd-container>
        </div>
        <div fxFlex>
          <h3>Model</h3>
          <pre><code>{{targetBuilderTools | json}}</code></pre>
        </div>
      </div>

[Hypercubed]

Hello Souvik, I'm sorry but I am not able to fulfill support request on GitHub. Please either rephrase your question as a bug (for example missing documentation) or seek support elsewhere.

[isawk]

@Souvik93 https://stackblitz.com/edit/ngx-dnd-directive-example-njjsd1?file=src%2Fapp%2Fapp.component.html thats might help :)