SVG rotate with component property as rotate attribute

I'm new to Angular2 and i'm currently having a basic problem. My goal is to display rotated texts with dynamic x positions (for now the positions are from a static tab). Here is my code.

myComponent.ts :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-line-plan',
  templateUrl: './line-plan.component.html',
  styleUrls: ['./line-plan.component.css']
})
export class MyComponent implements OnInit {

stations = [
  {x: 20, y: 150},
  {x: 50, y: 150},
  {x: 80, y: 150},
];

constructor() { }

ngOnInit() {
  }
}

myComponent.html:

<div class="transportLine">
  <div class="svgLine">
    <svg width="1140" height="300">
      <line [attr.y1]="150" [attr.x1]="0" [attr.y2]="150" [attr.x2]="1140" style="stroke:#F69EB4;stroke-width:6"/>

      <text *ngFor="let station of stations" [attr.x]="station.x"  y="130"
        [attr.style]="{'transform': 'rotate(-50, '+station.x+',130)'} | safeStyle">Rotated text</text>

      <circle *ngFor="let station of stations"
              [attr.cx]="station.x"
              [attr.cy]="station.y"
              [attr.r]="8"
          style="fill:white;stroke:#3f3f3f;stroke-width: 1"></circle>

    </svg>
  </div>
</div>

The rotation is not working and despite a long time looking for the reason, i can't find a solution (I tried several other syntaxes / way to do the rotation). Where did I go wrong ? Anyone willing to help me ?

Thanks in advance