Angular 2 - bypasscecurity - security

Question

I habe problem with the "security" of angular 2. I try to calculate a span-witdh within a ngfor-loop:
<span style="width:updateStyle({{ ((date | amDifference : item.startdate : 'minutes' :true)/item.duration*100) | round }})% .....more span>
And import/changed a bypass-security.component from internet:
import { Component } from '#angular/core';
import { DomSanitizer, SafeStyle, SafeResourceUrl, SafeUrl } from '#angular/platform-browser';
#Component({
selector: 'bypass-security',
templateUrl: 'app/bypass-security.component.html',
})
export class BypassSecurityComponent {
dangerousUrl: string;
trustedUrl: SafeUrl;
dangerrousStyle: string;
trustedStyle: SafeStyle;
// #docregion trust-url
constructor(private sanitizer: DomSanitizer) {
// javascript: URLs are dangerous if attacker controlled.
// Angular sanitizes them in data binding, but you can
// explicitly tell Angular to trust this value:
this.dangerousUrl = 'javascript:alert("Hi there")';
this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
this.trustedStyle = sanitizer.bypassSecurityTrustStyle(this.dangerrousStyle);
}
updateStyle(id: string)
{
this.trustedStyle = this.sanitizer.bypassSecurityTrustStyle(this.id);
}
}
But still get this error:
WARNING: sanitizing unsafe style value width:83%; height:3px; background-color:#d9d9d4; display:inline-block; (see http://g.co/ng/security#xss).
What can I do?
Thanks!

Answer 1

Calling methods from view bindings is usually bad practice because this method is called every time Angular2 checks for changes (runs change detection)
I don't really get what you try to accomplish, but if you want to set the width in % do something like
<span [style.width.%]="width">
and assign the value you want to be used for width to a property with that name
constructor() {
this.width = updateStyle(((date | amDifference : item.startdate : 'minutes' :true)/item.duration*100) | round }})
// I have a really hard time figuring out what this is supposed to do
I used the constructor only for an example. do the calculation whenever you think it should be updated (some event, some lifecycle callback, ...)