Using ng2DnD with dynamic components.

[kunjee17]

Sorry for asking here and skipping guide line. As I don't know where to ask question.

I am trying to implement sortable version of dnd. So, I cam move containers and boxes within containers. Last option in example.

But issue is we are having dynamic component for container as well as boxes under them are also dynamic components. So, we can't find index over the head. Because of this things are not working.

Two questions:

• Is it possible with dynamic component? If yes, any article or guidance how to use it?
• If not any work around or should be think of ditching dynamic components?

Please let me know if any further details are required.

Regards, Kunjan Dalal

[akserg]

Hi Kinjan,

Thank you for asking. Let me see how can I help you with your problem.

[kunjee17]

@akserg hi, We moved away from dynamic component. So, things are working now as it should. Thanks for wonderful library.

You can close this issue if you wish. Just one question there is dropsuccess function for dropable is there any thing in similar with sortable. If someone wants to save the state how things and containers are arranged?

[akserg]

Hi @kunjee17, It is wonderful that you solve the problem yourself. Sortable generates the following events:

• onDragSuccess
• onDropSuccess

You can use them as indicators that drag operation complete and the data source (sortableData) of the containers were updated.

[kunjee17]

@akserg thanks a lot. I will surely check it out. For now I am closing the issue. Thanks a ton for help.

[kunjee17]

@akserg one more question. While dropping container is growing vertically. Is it possible to grow it horizontally? Means if there is any config or setting we can change?

[akserg]

The library is UI agnostic, so you can use SPAN elements inside repeater to organize them in horizontal layout:

<h4>Simple sortable</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">
                Favorite drinks
            </div>
            <div class="panel-body" dnd-sortable-container [sortableData]="listOne">
                <span *ngFor="let item of listOne; let i = index" 
                                          class="drag-item" dnd-sortable [sortableIndex]="i">{{item}}</span>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                My prefences:<br/>
                <span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>
            </div>
        </div>
    </div>
</div>

Bear in mind to use right drag-item class with preset width and height.

[Narasimman-V]

Hi, it's a wonderful library. There is no doubt about it. I am facing the same problem that @kunjee17 faced. Can someone please help me?

I am using Angular 4.0. I want to use this library with dynamically created components but the sorting is not working. If I create the components inside the container using *ngFor, it is working fine. But I want to mix component types inside the container. So, I create them dynamically using ViewContainerRef in my Angular class.

The problem is: If I move the 'dnd-sortable' [sortableIndex] inside the component's template, it's not working.

This is working fine (here, static-tile is my component): <static-tile *ngFor="let app of appDefinitions; let i=index" dnd-sortable [sortableIndex]="i" [app]=app [dragEnabled]="true">

This is not working (here, I have moved the 'dnd-sortable' and 'sortableIndex' inside the template of 'static-tile' component): <div dnd-sortable [sortableIndex]="app.appName" ....>

[akserg]

Hi @Narasimman-V Can you please share the code here, because I don't understand how did you spread functionality between the different pieces of your application? The code snippets of parent and template components could be more than enough.