Struggling with dynamically updating the style of an element.
I've added margins on top of an image by creating a child component to handle it. I invoke a function on the child component that calculates the margins and sets a variable.
This is how the parent component is called, triggered by a button click.
showMargins() {
if (this.showingMargins) {
this.showingMargins = false;
} else {
this.showingMargins = true;
this.marginComponent.calculateMargins();
}
}
Below is the child component:
marginStyles: any = {};
...
calculateMargins() {
//logic
...
//setting the property
this.marginStyles = {
'height.px': height,
'margin-left.px': left
}
}
And in my template
<div id="margin-left" [ngStyle]="marginStyles">
Attempted using a function as well
private leftDiv() {
debugger;
return this.marginStyles;
}
updating the template accordingly
<div id="margin-left" [ngStyle]="leftDiv()">
However, it didn't work. It functions correctly when I hardcode values while declaring the variable.
marginStyles: any = {'height.px': 200, 'margin-left.px': 20};
If hardcoded directly into the template, it works fine too; the issue arises after calculations, failing to render the overlay lines. What am I missing here? Just for reference, working on Angular 4.
Edit: Transitioned all logic to the parent component, and everything seems intact. It appears that the values assigned to marginStyle in the child component are not being updated, which is perplexing. They should be updating. ngStyle operates normally, but the variable doesn't update.