CODEWITHSUNDEEP
htmlangulartypescriptuser-interfacematerial-design
MenimE
MenimE

Reputation: 304

Movable Expansion-Panel in Angular using Material

I have an array of objects 

  listA  = [
  { name : "Pink Floyd", 
    sequence : 1,
    favSong : "Shine On You", 
    favMember :[
    {artist : "Nick Mason"}
  ]},
    { name : "Guns and Roses", 
    sequence  :2,
    favSong : "November Rain", 
    favMember :[
    {artist : "Slash"}
  ]},
    { name : "Led Zeppelin",
    sequence  :3,
    favSong : "Stairway To heaven", 
    favMember :[
    {artist : "Jimmy page"}
  ]},
]

and I am displaying them as multiple expansion panels on the UI. I want to add a feature where i can drag individual expansion panels and and change the order in the which the names are displayed. I tried using sortableJs but i cant figure it out.

here is the HTML

<div>
    <strong>My favorite bands in order  : - </strong>
</div>
<hr />
<hr />



<div class="row mt-3">

            <div class="nomarLR mt-1 float-left col-12" *ngFor="let x of listA;let i =index">
                <mat-accordion multi="false" class="cus-accordion-style2 col-12" class="nomarLR nomarTB">
                    <mat-expansion-panel class="nomarLR nomarTB">
                        <mat-expansion-panel-header class="nomarLR nomarTB">
                            <mat-panel-title class="nomarLR nomarTB">
                                {{x.name}}
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <div *ngFor="let y of listA">
                            <span *ngFor="let z of y.favMember"> {{z.artist}} </span>
                        </div>
                    </mat-expansion-panel>
                </mat-accordion>
            </div>

</div>

<!-- why is multi not working ??-->

Can someone please help me with it. Here is a Stackblitz Also, when ever the user moves the expansion panels it should push the array objects in a different array with updated sequence.

Upvotes: 1

Views: 1978

Answers (1)

mayur
mayur

Reputation: 3618

Added (cdkDropListDropped)="drop($event)" event for drag and drop events and added cdkDrag for dom elements which you want to drag

HTML:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> // added html for drag and drop
  <div class="nomarLR mt-1 float-left col-12" *ngFor="let x of listA;let i =index" cdkDrag> // cdkDrag elements which are draggable.
                <mat-accordion multi="false" class="cus-accordion-style2 col-12"
                    class="nomarLR nomarTB">
                    <mat-expansion-panel class="nomarLR nomarTB">
                        <mat-expansion-panel-header class="nomarLR nomarTB">
                            <mat-panel-title class="nomarLR nomarTB">
                                {{x.name}}
              </mat-panel-title>
                        </mat-expansion-panel-header>
          <div *ngFor= "let y of listA">
            <span *ngFor="let z of y.favMember"> {{z.artist}} </span>
          </div>
                    </mat-expansion-panel>
                </mat-accordion>
        </div>
 </div>

TS

sortedArray = []


listA  = [
{ name : "Pink Floyd", 
favSong : "Shine On You", 
favMember :[
{artist : "Nick Mason"}
]},
{ name : "Guns and Roses", 
favSong : "November Rain", 
favMember :[
{artist : "Slash"}
]},
{ name : "Led Zeppelin", 
favSong : "Stairway To heaven", 
favMember :[
{artist : "Jimmy page"}
]},

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.listA, event.previousIndex, event.currentIndex);
}

Upvotes: 2

Related Questions