1

in the below piece of code. simple-point-box css class generate the simple box with drag and drop feature. N no. of simple boxes are store in the items array. here i am iterating each item which contain the button and right value. according to it i want to position the each item position. i thought to do this by using style tag by assigning bottom and right value from each item. please help me. i am stuck. 

<div id="widgetspace"
        class="simple-point-box"
        *ngFor="let item of items"
        ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
        [preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" ##style="bottom: 200px; right: 300px"##>
  <br>
  bottom={{item.bottom}}
  left={{item.right}}
</div>

i just need to change to style tag values according to item contain value. so that each item will position as per it saved position

Ashish Bhagat
  • 19
  • 1

1 Answers1

0

You don't need to add ## use simple style

<div id="widgetspace"
        class="simple-point-box"
        *ngFor="let item of items"
        ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
        [preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" style="bottom: 200px; right: 300px">

If you want dynamic style then you can use ngStyle for that purpose like

<div id="widgetspace"
        class="simple-point-box"
        *ngFor="let item of items"
        ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
        [preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')"  [ngStyle]="{'bottom': yourBottomProperty,'right': yourRightProperty}">
jitender
  • 10,238
  • 1
  • 18
  • 44
  • – Ashish Bhagat Oct 15 '19 at 04:57
  • i have assign bottom property value from item.bottom. how to take bottom value from item.bottom. as item contain json property of bottom with some value – Ashish Bhagat Oct 15 '19 at 04:59
  • if `item.bottom` contains a number eg `210` then it should be `[ngStyle]="{'bottom': item.bottom+'px'}` – jitender Oct 15 '19 at 05:10
  • Thank you for your reply. i have implemented in same way as you told. but now as i drag the box. it is not staying in that dropped position. @jitender – Ashish Bhagat Oct 15 '19 at 05:24
  • @AshishBhagat you will need to create a stackblitz demo of your problem may be some other problem you are getting – jitender Oct 15 '19 at 05:26
  • Your Answer is right. Thank you alot . appreciated @jitender. now i think i have some other problem. i am trying to solve it. otherwise i will share in stackblitz. – Ashish Bhagat Oct 15 '19 at 06:08