Warning: SafeValue must use [property]=binding

Question

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?

Answer 1

{{}} 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.