With this in my template,
<span [ngStyle]="myStyle()"> HELLO </span>
And this in my component,
myStyle(): string {
return '{"background-color":"blue"}'
}
I'm getting
ERROR Error: Cannot find a differ supporting object '{"background-color":"blue"}'
at KeyValueDiffers.webpackJsonp.../../../core/@angular/core.es5.js.KeyValueDiffers.find (core.es5.js:8051)
at NgStyle.set [as ngStyle] (common.es5.js:2441)
at updateProp (core.es5.js:11114)
at checkAndUpdateDirectiveInline (core.es5.js:10806)
at checkAndUpdateNodeInline (core.es5.js:12349)
at checkAndUpdateNode (core.es5.js:12288)
at debugCheckAndUpdateNode (core.es5.js:13149)
at debugCheckDirectivesFn (core.es5.js:13090)
at Object.View_AppComponent_2.currVal_2 [as updateDirectives] (AppComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
View_AppComponent_2 @ AppComponent.html:10
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13415
The reason is that [ngStyle]
does not accept a string. It accepts an object. Try this instead,
myStyle(): object {
return {"background-color":"blue"};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With