style.marginTop with the value of an angular variable

Question

style.marginTop with the value of an angular variable

Navigation

#1 by (2 votes)

0

I'm trying to give the property style.marginTop.px to my html by loading the value of an angular variable. Something like this:

Template:

 <div class="map-container">
  <div class="map">
  <div class="marcador" [style.marginTop.px]="top" [style.marginLeft.px]="left"><b>X</b></div>
</div>

Component:

private moveTheMark(place: any): void {
    switch(place) {
      case '0':
        this.top = '163px';
        this.left = '420px';
        break;
      case '1':
        this.top = '165px';
        this.left = '467px';
        break;

    }
  }

The moveTheMark function is called in the ngOnChanges and modifies the value of top and left depending on the place parameter. However, I can not make it work. Any ideas?

angular angular5

asked by Findelias 21.03.2018 в 16:38

source

1 answer

Doubts about method EDIT, UPDATE and routes How to query a sqlserver table with (numeric) to c #

score 2 · Accepted Answer

You are misusing the style directive try removing the px something like this

    <div class="map-container">
        <div class="map">
            <div class="marcador" [style.marginTop]="top" [style.marginLeft]="left">
             <b>X</b>
           </div>
      </div>
   </div>

You are adding the px value to the directive