i wont to bind a full style expression for an html element.
for example: expression like this in home.ts:
divStyle:string = "top:50%;bottom:50%;color:green;";
and in home.html i was try these ways to bind the style to the element:
<div class="preloader" [attr.style]="divStyle">
or
<div class="preloader" [style]="divStyle">
or
<div class="preloader" [ngStyle]="divStyle">
But it did not work.
any body know if it's possible to do it?
Due to security constraints; you will need to first sanitize the style string by using the DOM sanitizer:
Component:
Template:
Working sample: https://stackblitz.com/edit/angular-pkjd2q
Ideally, you should use a different approach such as the NgStyle directive which expects a style object, not a string. You would need to do the following:
Component:
Template: