I want to override the css class property by using style tag. Change the style tag value dynamically

Question

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

Answer 1

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}">