I'm trying to conditionally apply a transform: translateX($value)
directly to the template element using [ngStyle]
but I cannot find anyone talking about this. Mainly because I don't know what to search for :D.
I've seen some approaches doing basic styling with [style.color]
or something a bit more advanced with [attr.style]="{'transform': 'translateX(4rem)'}"
but the last one returns in the rendered HTML this: style="unsafe"
. I've seen that you can use the Sanitizer
to sanitize or bypass your styles/scripts etc... but at this point it was starting to 'smell' like something that you're not supposed to do? I'm looking for a clean way to achieve this. But I have no clue on where to look.
Thanks in advance to everyone!
或者你可以使用[style.transform]="'translateX('+$value+')'"
它本质上是一样的,但我更喜欢这种语法。
You can use [ngStyle]
as follows, assuming you have a $value
variable in your controller:
[ngStyle]="{'transform': 'translateX(' + $value + 'px)'}"
and suppose you want to change both the axis having controller variables $x , $y
[ngStyle]="{'transform': 'translate(' + $x + 'px, ' + $y + 'px)'}"
[style.transform]="'translateX('+value+'px)'" worked for me in Angular.
$value gave me an error.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.