bypassSecurityTrustStyle has no effect

Ionic Framework ionic-v3
1

Hi!

Im currently trying to get a direction indicator realised in an ionic 2 App. I tried it with several possible solutions (Pipe/Function) and none works for me. on the console i get a message

WARNING: sanitizing unsafe style value SafeValue must use [property]=binding: transform:rotate(48deg);[...]

even if the variable is marked as being type SafeStyleImpl suggesting me that the whole procedure worked. After switching to use property binding i get the same message but now as ng-reflect-ng-style within the html tag

My guess it’s some tiny thing I’m missing.

I could reproduce the problem in a ionic sample app (Template: blank)

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {DomSanitizer}from '@angular/platform-browser';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
public angle:number=42;
public angleStyle:any;
  constructor(public navCtrl: NavController,protected Sanitizer: DomSanitizer) {
      this.turnAngle(0);
  }
        turnAngle =function (angle){
        this.angle=this.angle+angle;
        let style="transform:rotate("+this.angle+"deg);";
        this.angleStyle=this.Sanitizer.bypassSecurityTrustStyle(style);
        console.log(this.angleStyle);
    }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button block (click)="turnAngle(-6);">-</button>
    <button ion-button block (click)="turnAngle(+6);">+</button>
    <div style="width:100%;text-align:center;font-size:72px;">
         <ion-icon name="arrow-round-up" [ngStyle]="angleStyle" ></ion-icon>
    </div>
    <ion-item>
        Angle: {{angle}}
    </ion-item>
</ion-content>

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.2.2

2

Found the solution, but I’m not sure whether it is intended that the way I used first didn’t work:

If I replace [ngStyle] in the template with [style] it works properly!

3

Warning: It turned out this works only on Android and ionic serve! When running on ios it breaks the complete app. Most parts turn white. Some texts disappear and lots of layout gets completely lost.

According to this post:

the correct way to do it would be to use [style.transform] instead of [style]. But using this the style is completely removed from the template.

I can’t believe there’s no solution for that?

4

Can you show the new code in your template? Also, when simply running ng serve and checking in e.g. Chrome, do you see any warnings/errors or anything out of the ordinary in the console?

5

After playing with a suggestion i found here i now got a solution that works on ios, android and ionic serve:

home.html

<ion-content padding>
    <button ion-button block (click)="angle=angle-6">-</button>
    <button ion-button block (click)="angle=angle+6">+</button>
    <div style="width:100%;text-align:center;font-size:72px;">
        <ion-icon name="arrow-round-up" [ngStyle]="{'transform':'rotate(' + angle + 'deg)'}" ></ion-icon>
    </div>
    <ion-item>
        Angle: {{angle}}
    </ion-item>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    public angle:number=42;
    constructor(public navCtrl: NavController) { 
    }
}

For now I’m quiet happy with that. My remaining Question would be: Why is this working without bypassSecurityTrustStyle? Is this a bug or can i rely on this?