Solution 1 :

Are you sure your value variable is contains a number value ?

Beacuse the [ngStyle]="{'transform': 'translate(' + value + 'px, 0px)'}" looks good to me.

Problem :

I have problem with setting position using NgStyle for the following code:

<ng-container *ngFor="let handlePosition of handlePositions; let i = index;">
      <div [ngStyle]="{'transform': 'translate(' + value + 'px, 0px)'}" class="handle-slider__handle"
        [ngDraggable]="fc.enabled"
        [lockAxis]="'y'"
        [bounds]="handleSlider"
        [inBounds]="inBounds"
        [position]="{ x: handlePosition, y: 0 }"
        (endOffset)="onHandleChange($event, i)"></div>
    </ng-container>

it seems like ngStyle doesnt apply changes for the element. Could some1 point me how to fix this?

@EDIT
I have done it like that, but there has to be a way of doing it in angular.

setHandleMaxPosition() {
    const tempValues = this.fc.value;
    tempValues[1] = this.values[this.indexOfNearestMax];
    this.fc.setValue(tempValues);
    this.handlePositions[1] = this.valuePositions[this.indexOfNearestMax];

    var a = Array.from(document.getElementsByClassName('handle-slider__handle') as HTMLCollectionOf<HTMLElement>)
    a[1].style.transform = "translate(" + this.valuePositions[this.indexOfNearestMin] + "px, 0px)";
  }

Comments

Comment posted by JWP

The doc says the unit must be present

Comment posted by Krzysztof

it is not present unfortunatelly

Comment posted by Máté Pankucsi

What is the value of the

Comment posted by Krzysztof

public value: numeric = 100; as a default, but whenever I change this value style isnt applied…

Comment posted by stackblitz.com/edit/angular-ngstyle-position-62551883

Can you provide an example or something ? I had try out more variation and all of them worked. U can check it out here:

By

Leave a Reply

Your email address will not be published. Required fields are marked *