Warning: SafeValue must use [property] = binding

Question

I am trying to send the getBoundingClientRect () element to my component this way:

<object [fromTop]="element.getBoundingClientRect().top"></object> 

In my html component I am doing this since I received a note saying that it was "unsafe"

 this.fromTop = this.sanitizer.bypassSecurityTrustStyle(this.fromTop); <div style="position:absolute;top:{{fromTop}}px;">Top:{{fromTop}}</div> 

But after adding the disinfectant, I get the following message:

SafeValue should use [property] = binding:

What happened? How can I let my object be in the absolute position equal to the vertex: {{fromTop}}px?

Answer 1

{{}} is for string binding only. The sanitized value is no longer a simple string, and if you use {{}} , the sanitation marker will be deleted.

You need to sanitize the entire style value and then bind it to [style]="..."

but the narrower way would be using Angular bindings or directives

 <div [style.top.px]="fromTop" [style.position]="'absolute'">Top:{{fromTop}}</div> <div [ngStyle]="{top: fromTop + 'px', position: 'absolute'}">Top:{{fromTop}}</div> 

Thus, no sanitization is required.