Within my component, I am encountering an issue where I am trying to edit some styles on a different component. I am passing an object to the component through property binding. The problem arises when updating the BorderRadius - it works when declaring a new object in .style, but not when assigning a value to an existing key.
Is this an error in my code, or is it a bug? Why is this happening?
Binding elProp to elementComponent
<app-element text="Test4" (click)="selectItem(item.id)" [elProp]="getProperty(item.id)"></app-element>
ElementComponent
<div
fxLayout="row"
[fxLayoutAlign]="property.text?.style?.position"
style="background-color: rgb(51, 134, 153);"
[ngStyle]="elProp.style"
[ngClass]="{ 'selectedItem': elProp.selected}"
>
{{ elProp?.text?.value }}
</div>
Input...
<input type="text" class="form-control" id="borderradius" (ngModelChange)="updateStyle()" >
updateStyle(){
this.itemProperty.map(el=>{
if(el.itemId == this.selectedId)
// el.style.borderRadius = "20px"; <<< doesn't WORK
// el.style['borderRadius‘] = "20px"; <<< doesn't WORK
// Object.assign(el.style,{borderRadius: "20px"}); <<< doesn't WORK
el.style = {borderRadius: "20px"}; <<< WORKS
})
}
Model
export interface ItemProperty {
itemId: string;
selected : boolean;
color: string;
border: string;
text: {
value: string,
style: {
position: string
},
};
style:{
borderRadius: string;
// border: string,
};
}