I'm trying to send an element getBoundingClientRect() to my component this way:
<object [fromTop]="element.getBoundingClientRect().top"></object>
In my component html I do this since I got a note 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 sanitizer I get the following message:
SafeValue must use [property]=binding:
What's wrong? How I can let my object be in an absolute position that equals to top: {{fromTop}}px?
{{}} is for string binding only. A sanitized value is not a plain string anymore and if you use {{}} the sanitization marker is removed.
You need to sanitize the whole style value and then bind it to [style]="..."
but a more angulary 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>
This way no sanitization is required.